html.ct-on main { position: relative; isolation: isolate; }
.ct-sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #030A24; }
.ct-vig { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(3, 10, 36, .78) 0, rgba(3, 10, 36, .32) 38%, rgba(3, 10, 36, .55) 100%), radial-gradient(120% 100% at 50% 55%, transparent 55%, rgba(2, 6, 28, .6) 100%); }
.ct-sky .sc-in { position: absolute; inset: 0; transform: translate3d(var(--px, 0px), var(--py, 0px), 0); will-change: transform; }
.ct-sky .sc-kb { position: absolute; inset: 0; animation: sc-respiro 52s ease-in-out infinite alternate; will-change: transform; }
.ct-sky picture, .ct-sky img, .ct-sky .sc-vid, .ct-sky .sc-fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ct-sky img, .ct-sky .sc-vid { object-fit: cover; user-select: none; -webkit-user-drag: none; }
.ct-sky .sc-fx { pointer-events: none; }
@keyframes sc-respiro { from { transform: scale(1.015) translate3d(-.4%, .2%, 0); } to { transform: scale(1.085) translate3d(.6%, -.5%, 0); } }
@media (prefers-reduced-motion: reduce) { .ct-sky .sc-kb { animation: none; will-change: auto; } .ct-sky .sc-in { transform: none; will-change: auto; } }
html.ct-light .ct-sky { background: #F2F6FF; }
@media (min-width: 1000px) { html.ct-on main .page-hero .lead { max-width: 29rem; } .ct-sky .sc-in { left: 22vw; right: -22vw; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16vw); mask-image: linear-gradient(90deg, transparent 0, #000 16vw); } }
html.ct-light .ct-sky .sc-in { filter: invert(1) hue-rotate(180deg) saturate(.75) brightness(1.04) contrast(.92); }
html.ct-light .ct-sky .sc-fx { display: none; }
html.ct-light .ct-vig { background: linear-gradient(180deg, rgba(242, 246, 255, .94) 0, rgba(242, 246, 255, .62) 36%, rgba(242, 246, 255, .78) 100%), radial-gradient(120% 100% at 50% 55%, transparent 50%, rgba(236, 242, 255, .85) 100%); }
html.ct-light.ct-on .page-hero.on-deep { --text: var(--ink); --text-soft: var(--ink-soft); --accent-text: #3358E0; --focus: #3358E0; color: var(--ink); }
html.ct-light.ct-on .page-hero .aurora { opacity: .55; }
html.ct-light .ct-tag { color: #3358E0; }
html.ct-light .ct-chip { color: var(--ink); background: rgba(80, 124, 255, .10); border-color: rgba(80, 124, 255, .42); }
html.ct-light .ct-chip i { background: radial-gradient(circle at 50% 38%, #3358E0 0 22%, transparent 24%), radial-gradient(ellipse at 50% 100%, #3358E0 0 46%, transparent 48%), rgba(80, 124, 255, .18); box-shadow: inset 0 0 0 1px rgba(80, 124, 255, .5); }
html.ct-on .page-hero, html.ct-on .page-hero.has-aurora { background: transparent; }
html.ct-on .page-hero .aurora { opacity: .35; }
html.ct-on .page-hero + .section, html.ct-on main > .section { background: transparent; }
@media (prefers-reduced-motion: reduce) { .ct-via, .ct-cl { animation: none; } }
.ct-tag { margin: .35rem 0 0; font: italic 500 clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem)/1.12 var(--font-serif); letter-spacing: -.012em; color: #A9CCFF; }
html.ct-on .page-hero .lead { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.2rem, 1.08rem + .55vw, 1.6rem); line-height: 1.4; letter-spacing: -.006em; max-width: 40rem; text-wrap: pretty; }
.ct-chip { display: inline-flex; align-items: center; gap: .55rem; margin: var(--s6, 1.5rem) 0 0; padding: .3rem .95rem .3rem .35rem; border-radius: 999px; font: italic 500 1.02rem/1.2 var(--font-serif); color: #EAF3FF; background: rgba(121, 191, 255, .12); border: 1px solid rgba(121, 191, 255, .45); }
.ct-chip i { width: 1.7rem; height: 1.7rem; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #cfe6ff 0 22%, transparent 24%), radial-gradient(ellipse at 50% 100%, #cfe6ff 0 46%, transparent 48%), rgba(121, 191, 255, .25); box-shadow: inset 0 0 0 1px rgba(121, 191, 255, .5); }
html.ct-on .contact__main { padding: clamp(1.25rem, 1rem + 1.4vw, 2.4rem); border-radius: 28px; background: rgba(8, 14, 40, .58); -webkit-backdrop-filter: blur(16px) saturate(1.25); backdrop-filter: blur(16px) saturate(1.25); border: 1px solid rgba(120, 160, 255, .24); box-shadow: 0 30px 80px rgba(0, 0, 6, .45), inset 0 1px rgba(255, 255, 255, .06); }
html.ct-light.ct-on .contact__main { background: rgba(255, 255, 255, .66); border-color: rgba(60, 100, 255, .22); box-shadow: 0 24px 70px rgba(30, 50, 110, .16), inset 0 1px rgba(255, 255, 255, .8); }
html.ct-on .contact__aside { background: rgba(8, 14, 40, .58); -webkit-backdrop-filter: blur(16px) saturate(1.25); backdrop-filter: blur(16px) saturate(1.25); border: 1px solid rgba(120, 160, 255, .24); box-shadow: 0 30px 80px rgba(0, 0, 6, .45); }
html.ct-light.ct-on .contact__aside { background: rgba(255, 255, 255, .66); border-color: rgba(60, 100, 255, .22); box-shadow: 0 24px 70px rgba(30, 50, 110, .16); }
html.ct-on .form h2 { font-family: var(--font-serif); font-style: italic; font-weight: 500; letter-spacing: -.012em; }
html.ct-on .form label, html.ct-on .form legend { font-family: var(--font-sans); }
.ct-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: .6rem 0 1rem; padding: 0; list-style: none; font: 650 .72rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.ct-steps li { display: flex; align-items: center; gap: .5rem; color: color-mix(in srgb, currentColor 52%, transparent); transition: color .3s; }
.ct-steps b { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1.5px solid currentColor; font-size: .68rem; }
.ct-steps li.on { color: var(--accent, #507CFF); } .ct-steps li.on b { background: var(--accent, #507CFF); border-color: var(--accent, #507CFF); color: var(--on-accent, #0A1638); box-shadow: 0 0 18px color-mix(in srgb, var(--accent, #507CFF) 60%, transparent); }
.ct-steps li.fatto { color: color-mix(in srgb, var(--accent, #507CFF) 80%, currentColor); }
html.ct-light .ct-steps li.on, html.ct-light .ct-ctx b { color: #3358E0; } html.ct-light .ct-steps li.on b { background: #3358E0; border-color: #3358E0; color: #FFFFFF; }
@media (max-width: 520px) { .ct-steps span { display: none; } .ct-steps li { justify-content: center; } }
html.ct-on .chipcheck { --ac: var(--accent, #507CFF); }
html.ct-on .chipcheck span { background: color-mix(in srgb, var(--ac) 9%, transparent); border-color: color-mix(in srgb, var(--ac) 52%, transparent); }
html.ct-on .chipcheck input:hover + span { background: color-mix(in srgb, var(--ac) 20%, transparent); }
html.ct-on .chipcheck input:checked + span { background: var(--ac); border-color: var(--ac); color: #06122C; box-shadow: 0 0 22px color-mix(in srgb, var(--ac) 55%, transparent); }
html.ct-on .form input[type="text"], html.ct-on .form input[type="email"], html.ct-on .form textarea, html.ct-on .form select { background: rgba(255, 255, 255, .05); border-color: rgba(140, 170, 255, .32); }
html.ct-light.ct-on .form input[type="text"], html.ct-light.ct-on .form input[type="email"], html.ct-light.ct-on .form textarea, html.ct-light.ct-on .form select { background: rgba(255, 255, 255, .8); border-color: rgba(60, 100, 255, .3); }
html.ct-on .form textarea { font-family: var(--font-serif); font-size: 1.08rem; line-height: 1.45; }
.ct-ctx { margin: 0 0 1.2rem; padding: .9rem 1.1rem; border-radius: 16px; background: color-mix(in srgb, var(--accent, #507CFF) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent, #507CFF) 45%, transparent); }
.ct-ctx b { display: block; font: 650 .7rem var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent, #507CFF); margin-bottom: .3rem; }
.ct-ctx p { margin: 0; font-family: var(--font-serif); font-size: 1.04rem; line-height: 1.4; }
.ct-scena { position: relative; height: 218px; border-radius: 20px; overflow: hidden; background: radial-gradient(120% 90% at 50% 18%, rgba(80, 130, 255, .38), transparent 62%), #050b22; border: 1px solid rgba(120, 160, 255, .3); margin-bottom: .4rem; }
.ct-scr { position: absolute; left: 50%; top: 24px; width: 76%; height: 112px; transform: translateX(-50%); border-radius: 10px; background: repeating-linear-gradient(0deg, transparent 0 12px, rgba(255, 255, 255, .07) 12px 14px), linear-gradient(120deg, #1b3a8a, #5a2fb0 55%, #e0508f); background-size: 100% 100%, 200% 100%; box-shadow: 0 0 46px rgba(110, 140, 255, .6), inset 0 0 0 2px rgba(255, 255, 255, .1); animation: ct-schermo 9s ease-in-out infinite alternate; }
.ct-per { position: absolute; left: 50%; bottom: -8px; height: 178px; aspect-ratio: 512 / 640; transform: translateX(-50%); background: var(--pi) var(--px, 0%) 100% / 500% 100% no-repeat; filter: brightness(.58) contrast(1.1) saturate(.9) drop-shadow(0 0 16px rgba(120, 160, 255, .5)); animation: ct-respira 6.5s ease-in-out infinite; transform-origin: 50% 100%; }
.ct-desk { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; background: linear-gradient(180deg, rgba(60, 90, 200, .55), rgba(10, 20, 60, .9)); border-top: 1px solid rgba(160, 190, 255, .55); }
.ct-scr[style*="--sf"] { background: var(--sf) center / cover no-repeat, #0a1230; animation: none; }
@keyframes ct-schermo { to { background-position: 0 0, 100% 0; } }
@keyframes ct-respira { 0%, 100% { transform: translateX(-50%) scaleY(1); } 50% { transform: translateX(-50%) scaleY(1.012) translateY(-1px); } }
html.ct-light .ct-scena { border-color: rgba(60, 100, 255, .3); }
@media (prefers-reduced-motion: reduce) { .ct-scr, .ct-per { animation: none; } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.ct-on .contact { perspective: 1700px; }
  html.ct-on .contact__main, html.ct-on .contact__aside { transform: rotateX(calc(var(--cty, 0) * -2.2deg)) rotateY(calc(var(--ctx, 0) * 3.2deg)); transform-origin: 50% 35%; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
  html.ct-on .contact__main:focus-within { transform: none; }
  html.ct-on .ct-scena { transform: perspective(820px) rotateY(calc(-11deg + var(--ctx, 0) * 12deg)) rotateX(calc(5deg - var(--cty, 0) * 8deg)); transform-origin: 50% 50%; box-shadow: calc(var(--ctx, 0) * -18px) calc(18px - var(--cty, 0) * 10px) 46px rgba(2, 6, 24, .55), 0 0 0 1px rgba(120, 160, 255, .22); }
  html.ct-on .ct-scr { translate: calc(var(--ctx, 0) * -7px) calc(var(--cty, 0) * -5px); }
  html.ct-on .ct-per { translate: calc(var(--ctx, 0) * 13px) calc(var(--cty, 0) * 7px); }
  html.ct-on .ct-desk { translate: calc(var(--ctx, 0) * 5px) 0; }
  html.ct-on .ct-scena::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(115deg, transparent 32%, rgba(190, 215, 255, .14) 48%, rgba(230, 240, 255, .20) 50%, rgba(190, 215, 255, .10) 53%, transparent 68%) calc(50% + var(--ctx, 0) * 120%) 50% / 240% 100% no-repeat; mix-blend-mode: screen; }
}