/* PrimaPosizione.ai — composizioni Aura: home e componenti condivisi delle pagine interne. */

.section-space { padding-block: 96px; }
@media (min-width: 768px) { .section-space { padding-block: 128px; } }
.section-foot { margin-top: 48px; text-align: center; }

/* ================= HOME: HERO ================= */
.hero { position: relative; z-index: 3; min-height: 85vh; display: flex; flex-direction: column; justify-content: center; padding-top: 168px; padding-bottom: 32px; }
@media (min-width: 768px) { .hero { padding-top: 192px; } }
.hero-top { display: flex; flex-direction: column; gap: 32px; margin-bottom: 48px; }
.hero-title-col { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.hero-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.platform-dots { display: flex; gap: 8px; }
.platform-dot { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--ink-3); background: var(--glass); border: 1px solid var(--line-soft); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), color .3s, background-color .3s; }
.platform-dot .icon { width: 18px; height: 18px; }
.platform-dot::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%; padding: 3px 8px; border-radius: 9999px; background: var(--ink); color: var(--bg); font-size: 10px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; opacity: 0; transform: translate(-50%, -4px); transition: opacity .25s, transform .25s; pointer-events: none; }
.platform-dot:hover, .platform-dot:focus-visible { transform: scale(1.1); color: var(--p); }
.platform-dot:hover::after, .platform-dot:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.platform-dot:hover .icon { animation: aura-wiggle .8s var(--ease); }
.is-chatgpt { --p: #10a37f; } .is-gemini { --p: #6f7cf6; } .is-perplexity { --p: #20b8cd; } .is-claude { --p: #d97757; }
.hero h1 { font-size: 2.25rem; line-height: 1.05; font-weight: 500; letter-spacing: -.025em; }
.hero-promise { max-width: 21ch; font-size: 1.625rem; line-height: 1.12; font-weight: 500; letter-spacing: -.025em; color: var(--ink); }
@media (min-width: 640px) { .hero h1 { font-size: 3rem; } .hero-promise { font-size: 2rem; } }
@media (min-width: 1024px) { .hero h1 { font-size: 4.5rem; } .hero-promise { font-size: 2.5rem; } }
.hero-side { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.hero-side p { max-width: 24rem; font-size: 18px; line-height: 28px; color: var(--ink-3); }
@media (max-width: 639px) { .hero-side .aura-button { width: 100%; } }
@media (min-width: 768px) {
  .hero-top { flex-direction: row; justify-content: space-between; align-items: flex-end; }
  .hero-title-col { width: 66.666%; }
  .hero-side { width: 33.333%; align-items: flex-end; text-align: right; }
}

/* Bento */
.hero-bento { display: grid; grid-template-columns: 1fr; gap: 16px; width: 100%; }
.bento-stack { display: flex; flex-direction: column; gap: 16px; }
.bento-mini { flex: 1; min-height: 140px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 24px; border-radius: 2rem; }
.bento-mini-top { display: flex; align-items: flex-start; justify-content: space-between; }
.bento-mini :is(h2, h3) { margin-bottom: 4px; font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -.025em; }
.bento-mini p { font-size: 14px; color: var(--muted); }
.bento-tall { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; height: 420px; padding: 32px; border: 1px solid var(--line-soft); border-radius: 2rem; background: var(--card); box-shadow: var(--shadow-xl); color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.bento-tall:hover, .bento-tall:focus-visible { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(255, 145, 70, .2); }
.bento-tall.art-question:hover, .bento-tall.art-question:focus-visible { box-shadow: 0 20px 40px rgba(70, 212, 198, .2); }
.bento-art { position: absolute; inset: 0; z-index: -2; overflow: hidden; transition: transform .7s ease-out; }
.bento-tall:hover .bento-art { transform: scale(1.05); }
.bento-tall::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .55) 26%, transparent 55%); pointer-events: none; }
:root[data-theme="dark"] .bento-tall::after { background: linear-gradient(to top, rgba(17, 24, 39, .94) 0%, rgba(17, 24, 39, .5) 28%, transparent 58%); }
.bento-tall .pill { position: relative; }
.bento-tall-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.bento-tall-title { display: block; margin-bottom: 8px; font-size: 28px; line-height: 1.1; font-weight: 500; letter-spacing: -.025em; }
.bento-tall-text { display: block; font-size: 16px; line-height: 1.5; color: var(--ink-3); }
.bento-tall:hover .orb-button, .bento-tall:focus-visible .orb-button { transform: scale(1.1); color: #fff; }
.bento-tall:hover .orb-button::before, .bento-tall:focus-visible .orb-button::before { opacity: 1; animation-play-state: running; }
.bento-tall:hover .orb-button::after, .bento-tall:focus-visible .orb-button::after { background: var(--orange); }
.bento-tall:hover .orb-button.is-teal::after, .bento-tall:focus-visible .orb-button.is-teal::after { background: var(--teal); }
.bento-tall:hover .orb-button .icon { animation: aura-arrow-out .6s var(--ease); }
@keyframes aura-arrow-out { 0% { transform: none; } 45% { transform: translate(120%, -120%); } 46% { transform: translate(-120%, 120%); } 100% { transform: none; } }
@media (min-width: 768px) {
  .hero-bento { grid-template-columns: 1fr 1fr; }
  .bento-stack { grid-column: 1 / -1; flex-direction: row; }
  .bento-mini { min-height: 180px; }
  .bento-tall { height: 440px; }
}
@media (min-width: 1024px) {
  .hero-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; height: 600px; }
  .bento-stack { grid-column: span 4; flex-direction: column; gap: 24px; }
  .bento-tall { grid-column: span 4; height: 100%; }
  .bento-tall-title { font-size: 36px; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .bento-tall { padding: 28px; } .bento-tall-title { font-size: 25px; } .bento-mini :is(h2, h3) { font-size: 17px; line-height: 24px; } .bento-mini { padding: 20px; } }

/* Schede alte sotto 1024px: illustrazione in alto e testo sotto, così non si sovrappongono mai */
@media (max-width: 1023px) {
  .bento-tall { --art-h: 300px; height: auto; padding: 0; justify-content: flex-start; background: var(--card-strong); }
  .bento-tall > .bento-art { position: relative; inset: auto; flex: none; height: var(--art-h); }
  .bento-tall > .pill { position: absolute; top: 20px; left: 20px; }
  .bento-tall::after { top: calc(var(--art-h) - 110px); bottom: auto; height: 110px; background: linear-gradient(to bottom, transparent, var(--card-strong)); }
  :root[data-theme="dark"] .bento-tall::after { background: linear-gradient(to bottom, transparent, var(--card-strong)); }
  .bento-tall-foot { padding: 4px 24px 24px; }
}
@media (min-width: 640px) and (max-width: 1023px) { .bento-tall { --art-h: 320px; } }
@media (max-width: 1023px) {
  .bento-tall.art-question:not(.art-ask) > .bento-art:has(> .ask-bubble) { display: flex; flex-direction: column; gap: 14px; padding: 66px 20px 18px; }
  .bento-tall.art-question:not(.art-ask) > .bento-art > :is(.ask-bubble, .ask-answer) { position: relative; inset: auto; }
  .bento-tall.art-question:not(.art-ask) > .bento-art > .ask-answer { margin-left: 12%; }
  .bento-tall.art-question:not(.art-ask) > .bento-art > .typing { display: none; }
}
@media (max-width: 1023px) {
  .bento-tall:is(.art-answers, .art-proposal, .art-meter, .art-context) { --art-h: 350px; }
  .bento-tall:is(.art-answers, .art-proposal, .art-meter, .art-context) > .bento-art > * { translate: 0 34px; }
}
@media (max-width: 479px) {
  .bento-tall.art-question:not(.art-ask) > .bento-art > .ask-answer i:not(.is-you) { display: none; }
  .bento-tall-title { font-size: 25px; }
}

/* Arte "La soluzione": orbite intorno al marchio */
.art-solution .bento-art { background: radial-gradient(55% 42% at 78% 22%, rgba(255, 145, 70, .95), transparent 70%), radial-gradient(60% 50% at 18% 42%, rgba(70, 212, 198, .85), transparent 72%), radial-gradient(70% 45% at 70% 72%, rgba(255, 190, 140, .9), transparent 72%), linear-gradient(160deg, #dcefe9 0%, #f3e3d4 100%); }
:root[data-theme="dark"] .art-solution .bento-art { background: radial-gradient(55% 42% at 78% 22%, rgba(255, 145, 70, .8), transparent 70%), radial-gradient(60% 50% at 18% 42%, rgba(70, 212, 198, .6), transparent 72%), radial-gradient(70% 45% at 70% 72%, rgba(190, 110, 60, .7), transparent 72%), linear-gradient(160deg, #10302d 0%, #2f2118 100%); }
.orbit-ring { position: absolute; left: 50%; top: 40%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .75); transform: translate(-50%, -50%); }
.ring-1 { width: 132px; height: 132px; background: rgba(255, 255, 255, .12); }
.ring-2 { width: 214px; height: 214px; border-style: dashed; animation: aura-spin 40s linear infinite; }
.ring-3 { width: 300px; height: 300px; border-color: rgba(255, 255, 255, .45); }
.orbit-core { position: absolute; left: 50%; top: 40%; display: grid; place-items: center; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #fff, rgba(255, 255, 255, .7) 40%, rgba(255, 255, 255, .35)); box-shadow: 0 18px 40px rgba(0, 0, 0, .18), inset 0 -6px 14px rgba(255, 145, 70, .35); animation: aura-bob-1 7s ease-in-out infinite; }
.orbit-core svg { width: 62px; height: 62px; }
.orbit-core rect { fill: #ff9146; }
.orbit-core rect:nth-child(2) { fill: #f2a86f; }
.orbit-core rect:nth-child(3) { fill: #46d4c6; }
.orbit-sat { position: absolute; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #1f2937; background: rgba(255, 255, 255, .85); box-shadow: 0 10px 24px rgba(0, 0, 0, .15); }
.orbit-sat .icon { width: 18px; height: 18px; }
.sat-1 { left: 16%; top: 20%; color: #10a37f; animation: aura-bob-1 7s ease-in-out infinite; }
.sat-2 { right: 14%; top: 16%; color: #6f7cf6; animation: aura-bob-2 8s ease-in-out infinite; }
.sat-3 { left: 12%; top: 54%; color: #20b8cd; animation: aura-bob-3 6s ease-in-out infinite; }
.sat-4 { right: 16%; top: 52%; color: #d97757; animation: aura-bob-1 7.5s ease-in-out infinite reverse; }

/* Arte "La domanda": chat con posto vuoto per la tua azienda */
.art-question .bento-art { background: radial-gradient(70% 42% at 50% 104%, rgba(255, 145, 70, .8), transparent 72%), radial-gradient(60% 45% at 25% 18%, rgba(70, 212, 198, .5), transparent 70%), linear-gradient(180deg, #52756f 0%, #2b4745 55%, #1e3131 100%); }
.ask-bubble { position: absolute; left: 10%; right: 10%; top: 17%; display: grid; gap: 6px; padding: 16px 18px; border-radius: 18px 18px 18px 6px; background: rgba(255, 255, 255, .88); color: #111827; box-shadow: 0 16px 40px rgba(0, 0, 0, .25); animation: aura-bob-3 6s ease-in-out infinite; }
.ask-bubble small { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #0f9f92; }
.ask-bubble b { font-size: 17px; line-height: 1.3; font-weight: 500; }
.ask-answer { position: absolute; left: 22%; right: 10%; top: 45%; display: grid; gap: 8px; }
.ask-answer i { height: 12px; border-radius: 9999px; background: rgba(255, 255, 255, .35); }
.ask-answer i:nth-child(2) { width: 72%; }
.ask-answer .is-you { height: auto; padding: 6px 12px; border: 1px dashed rgba(255, 190, 140, .9); background: rgba(255, 145, 70, .18); color: #ffe3cc; font-size: 11px; font-style: normal; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; animation: aura-blink 2s ease-in-out infinite; }
.typing { position: absolute; left: 10%; top: 45%; display: flex; gap: 4px; padding: 9px 10px; border-radius: 12px; background: rgba(255, 255, 255, .2); }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: aura-typing 1.4s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }

/* Modale con schede fluttuanti */
.aura-modal { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 16px; border: 0; background: rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); color: var(--ink); opacity: 0; transition: opacity .5s var(--ease), overlay .5s allow-discrete, display .5s allow-discrete; }
:root[data-theme="dark"] .aura-modal { background: rgba(11, 15, 25, .82); }
.aura-modal[open] { display: grid; place-items: center; opacity: 1; }
@starting-style { .aura-modal[open] { opacity: 0; } }
.aura-modal::backdrop { background: transparent; }
.modal-close { position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; }
.modal-close .icon { width: 28px; height: 28px; }
.modal-inner { width: 100%; max-width: 56rem; text-align: center; }
.modal-inner h2 { margin-bottom: 8px; font-size: 1.875rem; line-height: 1.1; }
@media (min-width: 768px) { .modal-inner h2 { font-size: 3rem; } }
.modal-sub { margin-bottom: 72px; color: var(--muted); font-size: 15px; }
@media (min-width: 640px) { .modal-sub { margin-bottom: 128px; } }
.modal-stage { position: relative; width: 280px; height: 240px; margin: 0 auto; transform: scale(.65); transform-origin: center; }
@media (min-width: 640px) { .modal-stage { transform: none; } }
.modal-center { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; border-radius: 1.5rem; background: var(--solid); border: 1px solid var(--line); box-shadow: var(--shadow-2xl); transition: transform .5s var(--ease); }
.modal-stage:hover .modal-center { transform: scale(1.05); }
.modal-center .chip { width: 48px; height: 48px; border-radius: 12px; margin-bottom: 8px; }
.modal-center h3 { font-size: 20px; font-weight: 600; }
.modal-center p { font-size: 12px; color: var(--muted-2); margin-bottom: 6px; }
.modal-float { position: absolute; left: 50%; top: 50%; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 200px; height: 140px; margin: -70px 0 0 -100px; padding: 16px; border-radius: 1rem; background: var(--solid); border: 1px solid var(--line); box-shadow: var(--shadow-xl); opacity: 0; transform: scale(.5); transition: transform .7s var(--spring), opacity .7s var(--spring); }
.modal-float span { font-size: 8px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
.modal-float strong { font-size: 14px; font-weight: 500; text-align: center; }
.modal-float i { width: 64px; height: 8px; border-radius: 9999px; background: linear-gradient(90deg, var(--line) 40%, transparent 40% 52%, var(--line) 52%); }
.aura-modal.is-spread .modal-float, .modal-stage:hover .modal-float { opacity: 1; transform: var(--to); }

/* ================= HOME: "PRIMA POSIZIONE" (palco del problema) ================= */
.brand-stage { position: relative; display: grid; grid-template-columns: 1fr; align-items: center; gap: 64px; min-height: 100vh; padding-block: 128px 96px; }
.brand-stage-copy { order: 2; text-align: center; }
.display-word { margin-bottom: 32px; font-size: 16vw; line-height: .92; font-weight: 600; letter-spacing: -.03em; color: var(--ink); }
.brand-stage h2 { margin-bottom: 20px; font-size: 1.375rem; line-height: 1.2; font-weight: 400; color: var(--muted); }
.brand-stage h2 em { display: block; margin-top: 6px; font-size: 2.125rem; line-height: 1.08; font-weight: 600; letter-spacing: -.03em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.brand-stage-copy > p:not(.display-word) { max-width: 32rem; margin-inline: auto; font-size: 18px; line-height: 1.625; color: var(--muted); }
.brand-stage-visual { position: relative; order: 1; display: flex; align-items: center; justify-content: center; height: 520px; perspective: 1500px; }
.stage-card { position: absolute; top: 0; left: 50%; z-index: 30; width: min(320px, 100%); padding: 32px; margin-left: -160px; border-radius: 1.5rem; background: rgba(255, 255, 255, .72); border: 1px solid var(--line-soft); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: var(--shadow-2xl); transition: transform .5s var(--ease); }
:root[data-theme="dark"] .stage-card { background: rgba(17, 24, 39, .62); border-color: rgba(255, 255, 255, .1); }
.stage-card:hover { transform: translateY(-8px); }
.stage-card p { margin-bottom: 32px; font-size: 16px; line-height: 1.625; font-weight: 500; letter-spacing: -.01em; color: var(--ink-2); }
.stage-card p strong { font-weight: 600; }
.tilt-art { position: relative; z-index: 20; width: 288px; height: 288px; margin-top: 110px; transform-style: preserve-3d; transition: transform .2s ease-out; cursor: crosshair; }
.tilt-plate { position: absolute; inset: 8%; border-radius: 10px; overflow: hidden; background: radial-gradient(60% 55% at 55% 62%, rgba(255, 145, 70, .95), rgba(255, 145, 70, 0) 70%), radial-gradient(40% 40% at 38% 30%, rgba(70, 212, 198, .6), transparent 70%), linear-gradient(165deg, #f7ecdd, #ecd6b9); box-shadow: 0 20px 40px rgba(0, 0, 0, .4); transform: translateZ(40px); }
:root[data-theme="dark"] .tilt-plate { background: radial-gradient(60% 55% at 55% 62%, rgba(255, 145, 70, .9), rgba(255, 145, 70, 0) 70%), radial-gradient(40% 40% at 38% 30%, rgba(70, 212, 198, .5), transparent 70%), linear-gradient(165deg, #3a2f25, #20252c); }
.tilt-bar { position: absolute; bottom: 24%; width: 17%; border-radius: 8px 8px 4px 4px; box-shadow: 10px 12px 24px rgba(0, 0, 0, .28), inset -6px 0 12px rgba(0, 0, 0, .16), inset 4px 4px 10px rgba(255, 255, 255, .5); }
.bar-1 { left: 22%; height: 26%; background: linear-gradient(180deg, #3c7f7b, #29585a); }
.bar-2 { left: 42%; height: 40%; background: linear-gradient(180deg, #f5efe6, #d9cfc2); }
.bar-3 { left: 62%; height: 56%; background: linear-gradient(180deg, #ffb27f, #ff8a3d); }
.tilt-sphere { position: absolute; right: 16%; bottom: 20%; width: 9%; height: 9%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #d8cfc4 60%, #a89886); box-shadow: 4px 8px 12px rgba(0, 0, 0, .3); }
.tilt-spark { position: absolute; border-radius: 50%; animation: aura-blink 2s ease-in-out infinite; }
.spark-1 { top: 10%; left: 10%; width: 16px; height: 16px; background: var(--orange); filter: blur(2px); box-shadow: 0 0 20px var(--orange); transform: translateZ(120px); }
.spark-2 { right: 10%; bottom: 10%; width: 24px; height: 24px; background: var(--teal); filter: blur(3px); box-shadow: 0 0 25px var(--teal); transform: translateZ(90px); animation-delay: 1s; }
.stage-note { position: absolute; right: 0; bottom: 0; z-index: 10; max-width: 290px; font-size: 12px; line-height: 1.6; font-weight: 500; color: var(--muted-2); text-align: right; transform: translateY(32px); }
@media (max-width: 1023px) {
  .brand-stage-visual { margin-bottom: 72px; }
  .stage-note { left: 0; right: 0; bottom: -56px; max-width: 320px; margin-inline: auto; text-align: center; transform: none; }
}
@media (min-width: 640px) { .display-word { font-size: 10vw; } }
@media (min-width: 1024px) {
  .brand-stage { grid-template-columns: 1fr 1fr; gap: 32px; padding-inline: 48px; }
  .brand-stage-copy { order: 1; text-align: left; }
  .brand-stage-copy > p:not(.display-word) { margin-inline: 0; font-size: 20px; }
  .display-word { font-size: 7.25rem; }
  .brand-stage h2 { font-size: 1.625rem; }
  .brand-stage h2 em { font-size: 2.75rem; }
  .brand-stage-visual { order: 2; height: 600px; }
  .stage-card { left: -48px; margin-left: 0; }
  .tilt-art { width: 384px; height: 384px; margin: 0 0 0 64px; }
  .stage-note { right: 48px; transform: translateY(16px); }
}
@media (min-width: 1280px) { .display-word { font-size: 8rem; } }

/* ================= ECOSYSTEM: pannello con timeline ================= */
.ecosystem { margin-top: 64px; }
@media (min-width: 768px) { .ecosystem { margin-top: 160px; } }
.eco-panel { max-width: 72rem; }
.timeline { position: relative; display: grid; gap: 64px; max-width: 80rem; margin: 0 auto; padding-inline: 8px; }
@media (min-width: 1024px) { .timeline { gap: 128px; } }
.timeline-track { position: absolute; left: 32px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.timeline-beam { position: absolute; left: -1px; top: 0; width: 3px; height: var(--beam, 0px); border-radius: 3px; background: var(--orange); box-shadow: 0 0 15px rgba(255, 145, 70, .6); transition: height .1s ease-out; }
.timeline-step { position: relative; display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.timeline-node { position: absolute; left: 32px; top: 50%; z-index: 20; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--solid); box-shadow: 0 0 0 4px var(--bg); transform: translate(-50%, -50%); transition: all .3s ease-out; }
.timeline-node:hover { background: var(--orange); border-color: var(--orange); transform: translate(-50%, -50%) scale(1.25); }
.timeline-step.is-active .timeline-node { background: var(--orange); border-color: var(--orange); box-shadow: 0 0 20px rgba(255, 145, 70, .8), 0 0 0 6px rgba(255, 145, 70, .2); transform: translate(-50%, -50%) scale(1.3); }
.timeline-wire { display: none; }
.step-copy, .step-visual { min-width: 0; padding-left: 64px; }
@media (max-width: 479px) { .timeline-track, .timeline-node { left: 12px; } .step-copy, .step-visual { padding-left: 32px; } .eco-panel { padding-inline: 8px; } }
.step-copy h3 { margin: 16px 0; font-size: 1.625rem; line-height: 1.2; }
.step-copy h3 em { color: var(--muted); }
.step-copy p { margin-bottom: 20px; font-size: 17px; line-height: 1.65; color: var(--muted); }
.phase-label.is-orange { color: var(--accent-ink); }
@media (min-width: 768px) {
  .timeline-track, .timeline-node { left: 50%; }
  .timeline-track { transform: translateX(-50%); }
  .timeline-step { grid-template-columns: 1fr 1fr; gap: 48px; }
  .step-copy, .step-visual { padding-left: 0; }
  .timeline-step:not(.is-flipped) .step-copy { padding-right: 48px; text-align: right; }
  .timeline-step:not(.is-flipped) .step-visual { padding-left: 24px; }
  .timeline-step.is-flipped .step-visual { order: 1; padding-right: 24px; }
  .timeline-step.is-flipped .step-copy { order: 2; padding-left: 48px; }
  .step-copy h3 { font-size: 1.875rem; line-height: 36px; }
  .step-copy p { font-size: 18px; }
  .timeline-wire { position: absolute; top: 50%; z-index: 1; display: block; width: 48px; height: 2px; background: var(--line); transform: translateY(-50%); }
  .timeline-step:not(.is-flipped) .timeline-wire { left: 50%; }
  .timeline-step.is-flipped .timeline-wire { right: 50%; }
  .timeline-wire::after { content: ''; position: absolute; inset: -0.5px 0; border-radius: 2px; background: linear-gradient(90deg, var(--orange), rgba(255, 145, 70, .35)); box-shadow: 0 0 10px rgba(255, 145, 70, .5); transform: scaleX(0); transform-origin: left; transition: transform .8s ease-out; }
  .timeline-step.is-flipped .timeline-wire::after { transform-origin: right; background: linear-gradient(270deg, var(--orange), rgba(255, 145, 70, .35)); }
  .timeline-step.is-active .timeline-wire::after { transform: scaleX(1); }
}
@media (min-width: 1024px) { .timeline-step { gap: 96px; } .timeline-wire { width: 72px !important; } }

/* Finestra "risposta AI" */
.mock-window { position: relative; overflow: hidden; border-radius: 1rem; background: rgba(255, 255, 255, .45); border: 1px solid rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: var(--shadow-2xl); transition: transform .5s var(--ease), box-shadow .5s; }
:root[data-theme="dark"] .mock-window { background: rgba(17, 24, 39, .45); border-color: rgba(55, 65, 81, .6); }
.mock-window:hover { transform: translateY(-4px); box-shadow: var(--shadow-2xl), 0 20px 40px rgba(255, 145, 70, .1); }
.mock-bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 16px; background: rgba(249, 250, 251, .8); border-bottom: 1px solid var(--line); }
:root[data-theme="dark"] .mock-bar { background: rgba(31, 41, 55, .8); }
.mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(248, 113, 113, .8); }
.mock-bar i:nth-child(2) { background: rgba(251, 191, 36, .8); } .mock-bar i:nth-child(3) { background: rgba(74, 222, 128, .8); }
.mock-bar span { margin-left: auto; font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }
.mock-chat { display: flex; flex-direction: column; gap: 14px; min-height: 240px; padding: 24px; }
.mock-q { align-self: flex-end; max-width: 82%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: rgba(70, 212, 198, .12); border: 1px solid rgba(70, 212, 198, .25); font-size: 13px; color: var(--ink-2); }
.mock-a { display: grid; gap: 10px; }
.mock-row { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border-radius: 10px; background: var(--bg-soft); border: 1px solid var(--line); }
.mock-row b { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--line); font-size: 11px; color: var(--muted); }
.mock-row i { width: var(--w); height: 8px; border-radius: 9999px; background: var(--line-2); }
.mock-row.is-slot { border: 1px dashed rgba(255, 145, 70, .7); background: rgba(255, 145, 70, .06); animation: aura-blink 2.4s ease-in-out infinite; }
.mock-row.is-slot b { background: var(--orange); color: #fff; }
.mock-row em { font-size: 11px; font-style: normal; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); }
.mock-flow { position: relative; height: 36px; overflow: hidden; border-radius: 10px; background: rgba(255, 145, 70, .1); border: 1px solid rgba(255, 145, 70, .2); }
.mock-flow i { position: absolute; inset: 0; width: 50%; background: rgba(255, 145, 70, .14); animation: aura-flow 2s cubic-bezier(.4, 0, .2, 1) infinite; }
.mock-badge { position: absolute; right: 24px; bottom: 24px; padding: 4px 12px; border-radius: 9999px; background: #0f766e; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 10px 15px -3px rgba(20, 184, 166, .3); }

/* Mini bento delle piattaforme */
.mini-bento { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 640px) { .mini-bento { grid-template-columns: 1fr 1fr; gap: 12px; } }
.mini-bento .aura-card { display: flex; gap: 12px; padding: 16px; border-radius: 1rem; }
.mini-bento .chip { width: 32px; height: 32px; }
.mini-bento .chip .icon { width: 16px; height: 16px; }
.mini-bento strong { display: block; font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
.mini-bento small { display: block; font-size: 11px; color: var(--muted-2); }
.mini-tall { flex-direction: column; justify-content: space-between; min-height: 150px; padding: 20px !important; }
.mini-tall .chip { width: 40px; height: 40px; }
.mini-small { flex-direction: column; justify-content: center; }
.mini-wide { align-items: center; }
@media (min-width: 640px) { .mini-tall { grid-row: span 2; } .mini-wide { grid-column: span 2; } }
.mini-bento .aura-card > span:not(.chip) { min-width: 0; }
@media (max-width: 639px) {
  .mini-bento .aura-card, .mini-bento .mini-tall { flex-direction: row; align-items: center; justify-content: flex-start; min-height: 0; padding: 14px 16px !important; }
  .mini-bento .chip, .mini-bento .mini-tall .chip { width: 40px; height: 40px; }
  .mini-bento .chip .icon { width: 18px; height: 18px; }
  .mini-bento strong { font-size: 14px; }
  .mini-bento small { font-size: 12px; }
}
@media (min-width: 640px) { .mini-small small { display: none; } }
.mini-bento .is-you { background: linear-gradient(var(--card-strong), var(--card-strong)) padding-box, var(--grad) border-box; }

/* Plancia "sapere dove sei" */
.presence-board { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; min-height: 290px; padding: 16px; border-radius: 1rem; background: rgba(249, 250, 251, .6); border: 1px solid var(--line); box-shadow: var(--shadow-2xl); transition: transform .5s var(--ease), box-shadow .5s; }
:root[data-theme="dark"] .presence-board { background: rgba(11, 15, 25, .8); }
.presence-board:hover { transform: translateY(-4px); }
.blob { position: absolute; width: 128px; height: 128px; border-radius: 50%; filter: blur(40px); opacity: .22; mix-blend-mode: multiply; animation: aura-blob 7s infinite; }
:root[data-theme="dark"] .blob { mix-blend-mode: screen; opacity: .14; }
.blob-teal { top: 20%; left: 20%; background: var(--teal); }
.blob-orange { top: 30%; right: 20%; background: var(--orange); animation-delay: 2s; }
.presence-message, .presence-root, .presence-nodes span { position: relative; z-index: 1; background: rgba(255, 255, 255, .85); border: 1px solid var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--shadow-sm); }
:root[data-theme="dark"] :is(.presence-message, .presence-root, .presence-nodes span) { background: rgba(17, 24, 39, .85); }
.presence-message { display: flex; gap: 12px; width: 96%; margin-bottom: 10px; padding: 12px; border-radius: 12px; }
.presence-avatar { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-soft); border: 1px solid var(--line); color: var(--muted-2); }
.presence-avatar .icon { width: 16px; height: 16px; }
.presence-message small { display: block; margin-bottom: 2px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-ink); }
.presence-message b { font-size: 12px; line-height: 1.4; font-weight: 400; color: var(--ink-3); }
.presence-root { display: flex; align-items: center; gap: 10px; padding: 8px 24px; border-radius: 12px; }
.presence-root b { display: block; font-size: 12px; font-weight: 700; }
.presence-root small { display: flex; align-items: center; gap: 4px; font-size: 9px; color: var(--muted-2); }
.presence-root small i { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 5px #22c55e; }
.presence-lines { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 100%; }
.presence-lines i:first-child { width: 1px; height: 18px; background: var(--line-2); }
.presence-lines i:last-child { width: 76%; height: 1px; background: var(--line-2); }
.presence-nodes { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; margin-top: 14px; }
.presence-nodes span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 2px; border-radius: 10px; font-size: 9px; font-weight: 700; color: var(--ink); transition: border-color .3s; }
.presence-nodes span::before { content: ''; position: absolute; top: -15px; left: 50%; width: 1px; height: 14px; background: var(--line-2); }
.presence-nodes em { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--teal-text); background: rgba(70, 212, 198, .12); transition: transform .3s var(--spring); }
.presence-nodes span:nth-child(2n) em { color: var(--orange-text); background: rgba(255, 145, 70, .12); }
.presence-nodes span:hover { border-color: rgba(70, 212, 198, .5); }
.presence-nodes span:hover em { transform: scale(1.12); }
.presence-nodes .icon { width: 13px; height: 13px; }
.presence-chip { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding: 6px 22px; border-radius: 9999px; background: var(--accent-bg); border: 1px solid var(--accent-line); color: var(--accent-ink); font-size: 11px; font-weight: 500; }
.presence-board .presence-chip { margin-top: 16px; }
.presence-chip .icon { width: 13px; height: 13px; }

.ecosystem-close { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-top: 96px; text-align: center; }
.ecosystem-close p { font-size: 20px; line-height: 1.5; color: var(--ink-3); }
.ecosystem-close strong { color: var(--ink); font-weight: 500; }

/* ================= PIATTAFORME ================= */
.platform-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .platform-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (min-width: 1100px) { .platform-grid { grid-template-columns: repeat(4, 1fr); } }
.platform-card { display: flex; flex-direction: column; gap: 12px; min-height: 300px; padding: 28px; }
.platform-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.platform-symbol { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--p); background: color-mix(in srgb, var(--p) 14%, transparent); border: 1px solid color-mix(in srgb, var(--p) 25%, transparent); transition: transform .5s var(--spring), background-color .4s, color .4s; }
.platform-symbol .icon { width: 22px; height: 22px; }
.platform-card:hover .platform-symbol, .platform-card:focus-visible .platform-symbol { color: #fff; background: var(--p); transform: rotate(-12deg) scale(1.1); }
.platform-card:hover .platform-symbol .icon { animation: aura-wiggle .9s var(--ease); }
.platform-card .small-label { color: color-mix(in srgb, var(--p) 68%, #000); }
:root[data-theme="dark"] .platform-card .small-label { color: var(--p); }
.platform-card h3 { font-size: 20px; line-height: 1.3; }
.platform-card p { font-size: 14px; line-height: 1.6; color: var(--muted); }
.platform-card-link { position: relative; width: max-content; margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: 500; color: var(--ink); }
.platform-card-link::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px; background: var(--p); transform: scaleX(.2); transform-origin: left; transition: transform .45s var(--ease); }
.platform-card:hover .platform-card-link::after { transform: scaleX(1); }
.platform-card.is-chatgpt:hover { box-shadow: 0 10px 30px rgba(16, 163, 127, .18); }
.platform-card.is-gemini:hover { box-shadow: 0 10px 30px rgba(111, 124, 246, .18); }
.platform-card.is-perplexity:hover { box-shadow: 0 10px 30px rgba(32, 184, 205, .18); }
.platform-card.is-claude:hover { box-shadow: 0 10px 30px rgba(217, 119, 87, .18); }

/* ================= RISULTATI (schede espandibili) ================= */
.results { position: relative; }
.result-rail { display: flex; flex-direction: column; gap: 16px; max-width: 66rem; margin: 0 auto; }
.result-card { position: relative; flex: 1; overflow: hidden; border-radius: 1.5rem; background: rgba(255, 255, 255, .42); border: 1px solid var(--line-soft); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: var(--shadow-lg); transition: flex .7s cubic-bezier(.25, 1, .5, 1), box-shadow .5s; }
:root[data-theme="dark"] .result-card { background: rgba(17, 24, 39, .42); border-color: rgba(255, 255, 255, .1); }
.result-rest { display: none; }
.result-open { display: flex; flex-direction: column; gap: 28px; padding: 24px; }
.result-body { display: flex; flex-direction: column; gap: 18px; }
.result-open .tag { align-self: flex-start; }
.result-icons { display: flex; gap: 6px; color: var(--orange-text); }
.result-icons .icon { width: 20px; height: 20px; }
.result-card h3 { font-size: 1.375rem; line-height: 1.2; font-weight: 500; }
.result-card p { color: var(--muted); line-height: 1.6; }
.result-foot { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.result-foot strong { display: block; font-size: 14px; font-weight: 600; }
.result-foot small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.result-foot .orb-button { margin-left: auto; }
.result-foot .orb-button:hover::before, .result-foot .orb-button:focus-visible::before { opacity: 1; animation-play-state: running; }
.result-foot .orb-button:hover, .result-foot .orb-button:focus-visible { color: #fff; transform: scale(1.08); }
.result-foot .orb-button:hover::after, .result-foot .orb-button:focus-visible::after { background: var(--orange); }
.result-avatar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #0f766e; color: #fff; font-size: 13px; font-weight: 700; }
.result-avatar.is-orange { background: #c2410c; } .result-avatar.is-blue { background: #2563eb; }
@media (min-width: 768px) {
  .result-rail { flex-direction: row; height: 600px; }
  .result-rest { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 14px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; color: var(--muted); transition: opacity .3s; pointer-events: none; }
  .result-open { position: absolute; inset: 0; justify-content: flex-start; padding: 32px; opacity: 0; transition: opacity .7s ease .1s; }
  .result-body { min-width: 330px; margin-top: auto; gap: 24px; }
  .result-card h3 { font-size: 1.875rem; line-height: 1.12; }
  .result-card:hover, .result-card:focus-within, .result-card.is-open { flex: 2.5; }
  .result-card:hover .result-rest, .result-card:focus-within .result-rest, .result-card.is-open .result-rest { opacity: 0; }
  .result-card:hover .result-open, .result-card:focus-within .result-open, .result-card.is-open .result-open { opacity: 1; }
  html:not(.js) .result-open, :root[data-motion="off"] .result-card.is-open .result-open { opacity: 1; }
}
.results-context { max-width: 44rem; margin: 40px auto 0; font-size: 13px; line-height: 1.6; color: var(--muted-2); text-align: center; }
.result-card[data-state="caso"] .tag { background: rgba(20, 184, 166, .1); border-color: rgba(20, 184, 166, .25); color: #0f766e; }

/* ================= PRENOTA UNA CALL (home + pagina) ================= */
.call-card { position: relative; display: flex; flex-direction: column; gap: 48px; max-width: 72rem; margin: 0 auto; padding: 28px; border-radius: 1.5rem; background: var(--solid); border: 1px solid var(--line); box-shadow: var(--shadow-2xl); overflow: hidden; }
@media (min-width: 768px) { .call-card { flex-direction: row; padding: 48px; } .call-card > * { flex: 1 1 0; min-width: 0; } }
.call-copy { display: flex; flex-direction: column; justify-content: center; }
.call-copy .section-label { margin-bottom: 24px; font-size: 10px; font-weight: 700; }
.call-copy h2 { margin-bottom: 24px; font-size: 2.25rem; line-height: 1.05; }
@media (min-width: 768px) { .call-copy h2 { font-size: 3rem; line-height: 1; } }
.call-copy > p:not(.call-note) { margin-bottom: 36px; font-size: 18px; line-height: 1.625; color: var(--muted); }
.call-features { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.call-features li { display: flex; align-items: center; gap: 16px; }
.call-features strong { display: block; font-size: 14px; font-weight: 600; }
.call-features small { display: block; font-size: 12px; color: var(--muted-2); }
.feature-icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; color: var(--orange-text); background: var(--solid); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .5s var(--spring), background-color .3s, color .3s; }
.feature-icon.is-teal { color: var(--teal-text); } .feature-icon.is-blue { color: #3b82f6; }
.feature-icon .icon { width: 22px; height: 22px; }
.call-features li:hover .feature-icon { transform: rotate(-12deg) scale(1.08); background: var(--orange); color: #fff; }
.call-features li:hover .feature-icon.is-teal { background: var(--teal); }
.call-features li:hover .feature-icon.is-blue { background: #3b82f6; }
.call-direct { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.call-direct a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 9999px; border: 1px solid var(--line); color: var(--ink-3); font-size: 13px; font-weight: 500; text-decoration: none; transition: border-color .3s, color .3s, transform .3s; }
.call-direct a:hover { border-color: var(--orange); color: var(--accent-ink); transform: translateY(-2px); }
.call-direct .icon { width: 16px; height: 16px; }
.call-note { margin-top: 16px; font-size: 12px; line-height: 1.6; color: var(--muted-2); }

.booking-card { position: relative; min-height: 450px; padding: 28px; border-radius: 1rem; background: var(--solid); border: 1px solid var(--line); box-shadow: var(--shadow-xl); }
:root[data-theme="dark"] .booking-card { background: rgba(31, 41, 55, .5); border-color: #374151; }
@media (min-width: 768px) { .booking-card { padding: 32px; } }
.booking-fallback { display: grid; gap: 16px; }
.booking-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px; padding: 0; list-style: none; counter-reset: step; }
.booking-steps li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; border-radius: 9999px; border: 1px solid var(--line); font-size: 11px; font-weight: 500; color: var(--muted-2); counter-increment: step; transition: all .3s; }
.booking-steps li::before { content: counter(step); display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--bg-soft); font-size: 10px; font-weight: 700; }
.booking-steps li[aria-current="step"] { border-color: rgba(255, 145, 70, .5); background: var(--accent-bg); color: var(--accent-ink); }
.booking-steps li[aria-current="step"]::before { background: var(--orange); color: #fff; }
#booking-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
#booking-form legend, .booking-review h2 { margin-bottom: 20px; padding: 0; font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
#booking-form legend:focus, .booking-review h2:focus { outline: none; }
.js[data-motion="on"] #booking-form [data-booking-step]:not([hidden]) { animation: aura-in .45s ease-out both; }
.booking-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.booking-actions .button { padding-inline: 24px; }
.booking-back { display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; border: 0; background: none; color: var(--muted); font-size: 13px; font-weight: 500; }
.booking-back:hover { color: var(--accent-ink); }
.booking-error { margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; background: rgba(239, 68, 68, .08); border: 1px solid rgba(239, 68, 68, .3); color: #b91c1c; font-size: 13px; }
:root[data-theme="dark"] .booking-error { color: #fca5a5; }
.booking-help { margin: 4px 0 16px; font-size: 12px; line-height: 1.55; color: var(--muted-2); }
.booking-review dl { display: grid; gap: 8px; margin: 0 0 20px; }
.booking-review dl > div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--bg-soft); border: 1px solid var(--line); font-size: 13px; }
.booking-review dt { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); align-self: center; }
.booking-review dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.booking-review .button { width: 100%; }
.form-row { display: grid; gap: 0 16px; }
@media (min-width: 480px) { .form-row { grid-template-columns: 1.25fr 1fr; } }
.form-row > .form-field { min-width: 0; }
.booking-honey { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.booking-submit[aria-busy="true"] { cursor: progress; opacity: .8; }
.booking-submit-busy { display: inline-flex; align-items: center; gap: 10px; }
.booking-submit-busy::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: booking-spin .8s linear infinite; }
@keyframes booking-spin { to { transform: rotate(1turn); } }
.booking-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.booking-send { display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; font-size: 13px; font-weight: 500; color: var(--muted); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; transition: color .2s; }
.booking-send:hover { color: var(--teal-ink); text-decoration-color: currentColor; }
.form-note { margin-top: 20px; font-size: 11px; line-height: 1.5; text-align: center; color: var(--muted-2); }
.form-note a { color: inherit; }

/* ================= VISION / PORTFOLIO ================= */
.vision { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; overflow: hidden; }
.vision h2 { max-width: 56rem; margin: 24px 0 48px; font-size: 2.25rem; line-height: 1.05; }
@media (min-width: 768px) { .vision h2 { font-size: 3rem; margin-bottom: 80px; } }
@media (min-width: 1024px) { .vision h2 { font-size: 3.75rem; } }
.vision-fan { list-style: none; padding: 0; position: relative; width: 100%; max-width: 72rem; height: 300px; margin: 8px 0 72px; transform: scale(.65); transform-origin: center; }
@media (min-width: 640px) { .vision-fan { height: 400px; transform: none; margin-bottom: 96px; } }
@media (min-width: 768px) { .vision-fan { height: 500px; } }
.vision-card { position: absolute; left: 50%; top: 50%; z-index: var(--z); width: 32%; aspect-ratio: 3 / 4; margin: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)); transition: transform .5s var(--ease); }
@media (min-width: 640px) { .vision-card { width: 26%; } }
@media (min-width: 768px) { .vision-card { width: 20%; } }
@media (min-width: 1024px) { .vision-card { width: 16%; } }
.vision-card:hover { z-index: 50; }
.vision-card > figure { position: relative; width: 100%; height: 100%; margin: 0; }
.vision-shot { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 1rem; border: 1px solid rgba(255, 255, 255, .15); box-shadow: 0 20px 40px rgba(0, 0, 0, .45); filter: brightness(.82); transition: transform .5s var(--ease), filter .5s var(--ease); }
.vision-card:hover .vision-shot { transform: scale(1.15); filter: brightness(1); }
.vision-shot::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent 55%); opacity: .85; transition: opacity .5s; }
.vision-card:hover .vision-shot::after { opacity: .35; }
.vision-shot > span { position: absolute; left: 10%; right: 10%; }
.vs-bar { top: 6%; display: flex; gap: 4px; }
.vs-bar i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.vs-hero { top: 15%; height: 30%; border-radius: 10px; background: rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.vs-lines { top: 50%; display: grid; gap: 6px; }
.vs-lines i { height: 6px; border-radius: 9999px; background: rgba(255, 255, 255, .45); }
.vs-lines i:last-child { width: 60%; }
.vs-grid { top: 62%; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.vs-grid i { height: 38px; border-radius: 8px; background: rgba(255, 255, 255, .16); }
.art-1 .vision-shot { background: radial-gradient(70% 50% at 70% 20%, rgba(255, 170, 110, .8), transparent), linear-gradient(160deg, #4a2c22, #a2572c); }
.art-2 .vision-shot { background: radial-gradient(70% 50% at 30% 20%, rgba(120, 180, 255, .6), transparent), linear-gradient(160deg, #13294b, #2f5d8a); }
.art-3 .vision-shot { background: radial-gradient(60% 50% at 50% 30%, rgba(200, 200, 220, .45), transparent), linear-gradient(160deg, #22252f, #5b6272); }
.art-4 .vision-shot { background: radial-gradient(60% 45% at 50% 45%, rgba(255, 145, 70, 1), rgba(255, 145, 70, .2) 70%), linear-gradient(160deg, #e8742f, #ffb07a); }
.art-5 .vision-shot { background: radial-gradient(70% 50% at 60% 25%, rgba(255, 145, 70, .55), transparent), linear-gradient(160deg, #4b2f6b, #9b5aa8); }
.art-6 .vision-shot { background: radial-gradient(70% 50% at 40% 25%, rgba(70, 212, 198, .6), transparent), linear-gradient(160deg, #1f4a3f, #6fb49d); }
.vision-card figcaption { position: absolute; left: 10%; right: 10%; bottom: 7%; z-index: 2; display: grid; gap: 2px; text-align: left; color: #fff; pointer-events: none; }
.vision-card figcaption span { font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; opacity: .75; }
.vision-card figcaption strong { font-size: 12px; font-weight: 600; line-height: 1.2; }
.vision-text { max-width: 42rem; margin-bottom: 40px; font-size: 16px; line-height: 1.625; font-weight: 300; color: var(--muted); }
@media (min-width: 768px) { .vision-text { font-size: 18px; } }

/* ================= FAQ (sezione) ================= */
.faq-section { display: grid; gap: 48px; }
.faq-section > * { min-width: 0; }
@media (min-width: 1024px) { .faq-section { grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; } .faq-head { position: sticky; top: 120px; } }
.faq-head .section-label { margin-bottom: 20px; }
.faq-head h2, .faq-section > div:first-child h2 { margin-bottom: 16px; font-size: 2.25rem; line-height: 1.05; }
@media (min-width: 768px) { .faq-head h2, .faq-section > div:first-child h2 { font-size: 3rem; } }
.faq-intro { margin-bottom: 24px; font-size: 18px; color: var(--muted); }
.faq-section > div:first-child .section-label { margin-bottom: 20px; }

/* ================= PAGINE INTERNE: componenti condivisi ================= */
.inner-hero { position: relative; z-index: 3; padding-top: 40px; padding-bottom: 56px; }
.inner-hero > .eyebrow, .inner-hero-head { margin-bottom: 24px; }
.inner-hero h1 { font-size: 2.25rem; line-height: 1.05; font-weight: 500; letter-spacing: -.025em; }
@media (min-width: 640px) { .inner-hero h1 { font-size: 3rem; } }
@media (min-width: 1024px) { .inner-hero h1 { font-size: 4.25rem; } }
.inner-hero > h1 { max-width: 20ch; margin-bottom: 24px; }
.inner-hero-grid { display: flex; flex-direction: column; gap: 32px; }
.inner-hero-grid > div { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.inner-hero-grid > div > p { max-width: 26rem; font-size: 16px; line-height: 1.625; color: var(--muted); }
.inner-lead { max-width: 30rem; font-size: 18px; line-height: 28px; color: var(--ink-3); }
.inner-hero-grid .inner-lead { font-weight: 500; color: var(--ink); }
@media (max-width: 639px) { .inner-hero-grid .button, .inner-hero-grid .aura-button { width: 100%; } }
@media (min-width: 768px) {
  .inner-hero-grid { flex-direction: row; justify-content: space-between; align-items: flex-end; }
  .inner-hero-grid > h1, .inner-hero-grid > :first-child { width: 64%; }
  .inner-hero-grid > div:last-child { width: 33%; align-items: flex-end; text-align: right; }
}
.inner-hero-bento { margin-top: 56px; }
@media (min-width: 1024px) { .inner-hero-bento { height: 560px; } }
.next-step-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
@media (min-width: 768px) { .next-step-actions { align-items: flex-end; } }
.inner-bento { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 48px; }
@media (min-width: 768px) { .inner-bento { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.inner-bento .bento-mini { min-height: 190px; }

/* Problema + esempio (card di vetro sospesa su una lastra illustrata) */
.service-focus { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; padding-block: 96px; }
@media (min-width: 1024px) { .service-focus { grid-template-columns: 1.05fr .95fr; gap: 64px; padding-block: 128px; } }
.focus-copy .section-label { margin-bottom: 24px; }
.focus-copy h2 { margin-bottom: 24px; font-size: 2.25rem; line-height: 1.05; }
@media (min-width: 768px) { .focus-copy h2 { font-size: 3.25rem; line-height: 1.02; } }
.focus-copy p { max-width: 36rem; font-size: 18px; line-height: 1.65; color: var(--muted); }
.focus-copy p + p { margin-top: 16px; }
.discovery-example, .ai-signal-card { position: relative; isolation: isolate; padding: 32px; border-radius: 1.5rem; background: rgba(255, 255, 255, .72); border: 1px solid var(--line-soft); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: var(--shadow-2xl); transition: transform .5s var(--ease); }
:root[data-theme="dark"] :is(.discovery-example, .ai-signal-card) { background: rgba(17, 24, 39, .62); border-color: rgba(255, 255, 255, .1); }
.discovery-example:hover { transform: translateY(-6px) rotate(-.4deg); }
.discovery-example::before { content: ''; position: absolute; z-index: -1; right: -28px; bottom: -40px; width: 62%; aspect-ratio: 1; border-radius: 14px; background: radial-gradient(60% 55% at 55% 62%, rgba(255, 145, 70, .9), transparent 70%), radial-gradient(40% 40% at 35% 30%, rgba(70, 212, 198, .55), transparent 70%), linear-gradient(165deg, #f7ecdd, #ecd6b9); box-shadow: 0 20px 40px rgba(0, 0, 0, .3); transform: rotate(6deg); }
:root[data-theme="dark"] .discovery-example::before { background: radial-gradient(60% 55% at 55% 62%, rgba(255, 145, 70, .75), transparent 70%), radial-gradient(40% 40% at 35% 30%, rgba(70, 212, 198, .45), transparent 70%), linear-gradient(165deg, #3a2f25, #20252c); }
.discovery-example::after { content: '“'; position: absolute; top: 8px; right: 24px; font-size: 96px; line-height: 1; font-weight: 600; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .55; }
.discovery-example .small-label { margin-bottom: 18px; }
.discovery-example blockquote { margin: 0 0 18px; font-size: 22px; line-height: 1.35; font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.discovery-example p { color: var(--muted); line-height: 1.6; }
.discovery-example small { display: inline-flex; margin-top: 20px; padding: 4px 10px; border-radius: 9999px; background: var(--bg-soft); border: 1px solid var(--line); font-size: 11px; color: var(--muted-2); }

/* Intestazioni di sezione centrate */
.section-heading { position: relative; max-width: 48rem; margin: 0 auto 64px; text-align: center; }
.section-heading > div { display: contents; }
.section-heading .section-label { margin-bottom: 20px; }
.section-heading h2 { margin-bottom: 20px; font-size: 2.25rem; line-height: 1.05; }
@media (min-width: 768px) { .section-heading { margin-bottom: 96px; } .section-heading h2 { font-size: 3.75rem; line-height: 1; } }
.section-heading > p, .section-heading p:last-child { max-width: 42rem; margin-inline: auto; font-size: 20px; line-height: 1.625; font-weight: 300; color: var(--ink-3); }

/* Schede numerate */
.principles-grid { display: grid; grid-template-columns: 1fr; gap: 16px; counter-reset: principle; }
@media (min-width: 768px) { .principles-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.principles-grid article { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 2rem; border: 1px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(to bottom, var(--card-edge), transparent 70%) border-box; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: var(--shadow-lg); counter-increment: principle; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.principles-grid article:hover { transform: translateY(-4px); box-shadow: var(--glow-teal); }
.principles-grid article:nth-child(2):hover { box-shadow: var(--glow-orange); }
.principles-grid article::before { content: counter(principle, decimal-leading-zero); display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 18px; border-radius: 50%; color: var(--teal-text); background: linear-gradient(135deg, rgba(70, 212, 198, .2), rgba(255, 145, 70, .2)); border: 1px solid rgba(70, 212, 198, .2); font-size: 13px; font-weight: 700; transition: transform .5s var(--spring); }
.principles-grid article:nth-child(2)::before { color: var(--orange-text); background: linear-gradient(135deg, rgba(255, 145, 70, .2), rgba(236, 72, 153, .2)); border-color: rgba(255, 145, 70, .2); }
.principles-grid article:nth-child(3)::before { color: #3b82f6; background: linear-gradient(135deg, rgba(59, 130, 246, .2), rgba(168, 85, 247, .2)); border-color: rgba(59, 130, 246, .2); }
.principles-grid article:hover::before { transform: rotate(-10deg) scale(1.12); }
.principles-grid article > span:first-child { font-size: 10px; line-height: 15px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--teal-ink); }
.principles-grid article:nth-child(2) > span:first-child { color: var(--accent-ink); }
.principles-grid h3 { font-size: 22px; line-height: 1.25; }
.principles-grid p { font-size: 15px; line-height: 1.65; color: var(--muted); }
.principles-grid .text-link { margin-top: auto; padding-top: 8px; }

/* Blocco di sintesi centrato */
.discovery-detail { max-width: 56rem; margin: 0 auto; padding-block: 64px 96px; text-align: center; }
.discovery-detail .section-label { margin-bottom: 24px; }
.discovery-detail h2 { margin-bottom: 24px; font-size: 2rem; line-height: 1.1; }
@media (min-width: 768px) { .discovery-detail h2 { font-size: 3rem; line-height: 1.05; } }
.discovery-detail p { max-width: 42rem; margin: 0 auto; font-size: 18px; line-height: 1.65; color: var(--muted); }
.discovery-detail p + p { margin-top: 12px; font-size: 15px; color: var(--muted-2); }

/* Collegamenti correlati */
.discovery-related { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding-block: 24px 64px; }
.discovery-related p { padding: 12px 20px; border-radius: 9999px; background: var(--glass); border: 1px solid var(--line-soft); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--shadow-sm); font-size: 14px; color: var(--muted); }

/* Invito finale (stile "discovery call") */
.next-step { position: relative; display: grid; gap: 32px; align-items: center; max-width: 72rem; margin: 64px auto 32px; padding: 36px 28px; border-radius: 1.5rem; background: var(--solid); border: 1px solid var(--line); box-shadow: var(--shadow-2xl); overflow: hidden; }
.wrap.next-step { width: calc(100% - 2 * var(--gutter)); }
.next-step::before { content: ''; position: absolute; right: -10%; top: -60%; width: 60%; height: 220%; background: linear-gradient(90deg, rgba(255, 145, 70, .14), rgba(70, 212, 198, .14) 50%, transparent); filter: blur(40px); transform: rotate(-22deg); pointer-events: none; }
.next-step > * { position: relative; min-width: 0; }
.next-step .section-label { margin-bottom: 20px; }
.next-step h2 { margin-bottom: 16px; font-size: 2rem; line-height: 1.08; }
.next-step h2 br + * , .next-step h2 { text-wrap: balance; }
.next-step p { font-size: 18px; line-height: 1.6; color: var(--muted); }
@media (min-width: 768px) { .next-step { grid-template-columns: 1fr auto; gap: 48px; padding: 56px; } .next-step h2 { font-size: 3rem; line-height: 1.02; } }

/* Liste con spunte */
.plain-checklist { display: grid; gap: 12px; margin: 20px 0; padding: 0; list-style: none; }
.plain-checklist li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.5; color: var(--ink-3); }
.plain-checklist li::before { content: ''; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: linear-gradient(135deg, rgba(70, 212, 198, .25), rgba(255, 145, 70, .25)) ; -webkit-mask: none; box-shadow: inset 0 0 0 1px rgba(70, 212, 198, .35); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346d4c6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 12.5 3.5 3.5 7.5-8'/%3E%3C/svg%3E"), linear-gradient(135deg, rgba(70, 212, 198, .18), rgba(255, 145, 70, .18)); background-size: 16px 16px, cover; background-position: center; background-repeat: no-repeat; }