/* Home hero (site/public/index.html): the visitor's live mockup.
   Calm by design: names update in place, niches cross-fade (opacity only), no blur, no typing loop. */
.hero-v2 { text-align: left; place-items: center stretch; }
.v2-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 80px); align-items: center; width: 100%; }
.v2-copy { display: grid; gap: clamp(20px, 2.2vw, 28px); justify-items: start; min-width: 0; }
.hero-v2 h1 { font-size: clamp(2.8rem, 5.6vw, 5.4rem); }
.hero-v2 .namebox { width: 100%; }
.hero-v2 .hero-chips { justify-content: flex-start; }
.v2-hint { font-size: .88rem; color: #8d93a3; }

.v2-stage { position: relative; perspective: 1800px; min-width: 0; }
.v2-tilt { position: relative; padding-bottom: 7%; transform: rotateY(-9deg) rotateX(4deg); transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.v2-stage:hover .v2-tilt { transform: rotateY(-4deg) rotateX(2deg); }
.v2-stage .laptop { background: #16171d; border-radius: 18px 18px 0 0; padding: 0 10px; box-shadow: 0 60px 120px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .12), 0 0 140px rgba(123, 92, 255, .22); }
.v2-stage .lbar { display: flex; align-items: center; gap: 6px; padding: 11px 4px; }
.v2-stage .lbar i { width: 9px; height: 9px; border-radius: 50%; background: #3a3d48; }
.v2-stage .lbar span { margin-left: 10px; font-family: var(--mono); font-size: .72rem; color: var(--dim); background: #0b0c10; border-radius: 999px; padding: 4px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
.v2-stage .lbar span::before { content: "🔒 "; font-size: .65rem; }
.v2-stage .lscreen { position: relative; aspect-ratio: 16 / 10.4; overflow: hidden; border-radius: 6px 6px 0 0; font-size: clamp(7.5px, .82vw, 12px); background: #fff; }
.v2-stage .lbase { height: 14px; margin: 0 -4%; border-radius: 0 0 14px 14px; background: linear-gradient(#2a2d36, #121318); }
.v2-phone { position: absolute; right: -4%; bottom: 0; width: 27%; aspect-ratio: 9 / 19; border-radius: 28px; background: #050506; padding: 6px; z-index: 2; transform: translateZ(60px);
  box-shadow: 0 40px 80px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .16); }
.v2-phone .pscreen { position: relative; height: 100%; border-radius: 22px; overflow: hidden; font-size: clamp(5.5px, .56vw, 8.5px); background: #fff; }

/* two stacked layers per screen: the new niche fades in over the old one */
.v2-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.v2-layer.on { opacity: 1; }
.hero-v2 .hero-cap { margin-top: 22px; font-family: var(--mono); font-size: .74rem; color: var(--dim); display: flex; gap: 8px; align-items: center; transition: opacity .4s; }

@media (max-width: 980px) {
  .v2-grid { grid-template-columns: 1fr; }
  .v2-tilt, .v2-stage:hover .v2-tilt { transform: none; }
  .v2-phone { right: 0; width: 30%; transform: none; }
}
@media (max-width: 860px) { .v2-hint { display: none; } }

/* during the demo loop the chips follow the niche on screen, not the saved choice */
.hero-v2.demo .chip-pick[aria-pressed="true"] { background: rgba(255, 255, 255, .05); color: #c9cdd8; border-color: rgba(255, 255, 255, .12); }
.hero-v2.demo .chip-pick.demo-on { background: #fff; color: var(--ink); border-color: #fff; }

/* ===== v2 rework (2026-10-11): fewer sections, everything important above the fold ===== */
/* hero: tight top, headline scaled to the viewport height, ticker sits inside the first screen */
.hero-v2 { display: flex; flex-direction: column; min-height: calc(100svh - 64px); padding-block: clamp(20px, 4svh, 48px) 0; }
.hero-v2 > .v2-grid { flex: 1; align-content: center; }
.hero-v2 h1 { font-size: clamp(2.6rem, min(5.4vw, 9.6svh), 5.2rem); }
.hero-v2 .v2-copy { gap: clamp(16px, 2.6svh, 26px); }
.hero-v2 .marquee { position: relative; z-index: 1; margin-top: clamp(20px, 4svh, 40px); background: rgba(255, 255, 255, .03); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding-block: 14px; }

/* platform cards: the business at first glance + the apps that take a cut */
.ncards { gap: 12px; }
.ncards .ncard, .ncards .ncard[aria-pressed="true"] { position: relative; overflow: hidden; isolation: isolate; min-height: 150px; align-content: start; gap: 6px; padding: 18px 20px; color: #fff; border: 0;
  background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--b) 70%, transparent), transparent 60%), linear-gradient(150deg, var(--a), color-mix(in srgb, var(--a) 70%, #000));
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, filter .25s; }
.ncard b { font-size: 1.35rem; }
.ncards .ncard small { color: rgba(255, 255, 255, .8); font-size: .78rem; }
.ncard-ico { position: absolute; right: -14px; bottom: -18px; width: 110px; height: 110px; z-index: -1; fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .22; transform: rotate(-12deg); }
.brands { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }
.brands i { font-style: normal; font: 800 .82rem/1 var(--body); letter-spacing: -0.01em; background: var(--bg); color: var(--fg); padding: 7px 10px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); white-space: nowrap; }
.brands i b { font: inherit; }
.ncards .ncard:hover { transform: translateY(-3px); border: 0; }
.ncards:has([aria-pressed="true"]) .ncard:not([aria-pressed="true"]) { filter: saturate(.55) brightness(.85); }
.ncards .ncard[aria-pressed="true"] { transform: translateY(-3px); box-shadow: 0 0 0 3px #fff, 0 0 0 7px var(--violet), 0 24px 60px color-mix(in srgb, var(--a) 60%, transparent); }
.ncards .ncard[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 14px; right: 14px; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--a); display: grid; place-items: center; font-weight: 800; font-size: .8rem; }
#commissioni { padding-block: clamp(48px, 7svh, 88px); }
#commissioni .gap-head { gap: 16px; margin-bottom: clamp(28px, 4vw, 44px); }
#commissioni .coins-key { font-size: .95rem; font-weight: 600; }

/* "Il tuo sito": head, list, proofs and mockup all in one screen */
.tour-sec { padding-block: clamp(28px, 5svh, 56px); min-height: calc(100svh - 64px); display: grid; align-content: center; }
.tour-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; }
.tour-head > div:first-child { display: grid; gap: 10px; }
.tour-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); font-weight: 750; max-width: 30ch; }
.tour-head .hero-chips { justify-content: flex-end; }
.tour-sec .tour-grid { margin-top: clamp(20px, 3svh, 32px); grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.tour-left { display: grid; gap: 14px; }
.tour-sec .tour-list { gap: 2px; }
.tour-sec .tour-list li { padding: 10px 14px; gap: 12px; }
.tour-sec .tour-list li b { font-size: 1.08rem; }
.tour-sec .tour-list li p { font-size: .9rem; }
.tour-sec .proofs { margin-top: 0; gap: 10px; }
.tour-sec .proof { padding: 14px 16px; gap: 4px; border-radius: 18px; }
.tour-sec .proof .big { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.tour-sec .proof p { font-size: .86rem; line-height: 1.4; }
.tour-sec .tour-stage { width: 100%; max-width: max(320px, calc((100svh - 290px) * 1.5)); justify-self: end; }
@media (max-width: 900px) { .tour-sec { min-height: 0; } .tour-sec .tour-grid { grid-template-columns: 1fr; } .tour-sec .tour-stage { justify-self: stretch; max-width: none; } .tour-head .hero-chips { justify-content: flex-start; } }

/* pricing: who each tier is for + "everything in X, plus" so the upgrade reads as additive */
.tier .tier-for { font-family: var(--display); font-weight: 600; font-size: 1.12rem; letter-spacing: -0.01em; margin-top: -6px; }
.tier .tier-plus { font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); padding-top: 12px; border-top: 1px solid var(--hair-d); }
.tier.best .tier-plus { color: #b9bfcc; border-color: rgba(255, 255, 255, .14); }
.tier li b { font-weight: 700; }
/* tiers line up row by row (label, price, for-whom, "includes", list) */
#prezzi .tiers { grid-template-rows: repeat(5, auto); row-gap: 0; }
#prezzi .tier { grid-row: span 5; grid-template-rows: subgrid; position: relative; overflow: hidden; }
#prezzi .tier .tier-for { margin-top: 0; }
#prezzi .tier .tier-plus { align-self: end; }
/* "Consigliato" as a corner ribbon, out of the flow so prices stay aligned */
.tier .ribbon { position: absolute; top: 26px; right: -46px; width: 190px; transform: rotate(45deg); text-align: center; padding: 7px 0; background: var(--violet); color: #fff;
  font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 6px 18px rgba(123, 92, 255, .45); }
/* small marks after a feature: AI logos, round flags */
.marks { display: inline-flex; align-items: center; gap: 4px; height: 1lh; vertical-align: top; margin: 0 3px 0 2px; }
.marks i { width: 17px; height: 17px; border-radius: 50%; overflow: hidden; display: inline-grid; place-items: center; background: var(--bg, #fff); box-shadow: 0 0 0 1.5px var(--mark-ring, #fff), 0 1px 4px rgba(0, 0, 0, .16); }
#prezzi .tier ul { align-content: start; }
.marks.ai i svg { width: 10px; height: 10px; }
.marks.ai i[title="Google"] svg { width: 11px; height: 11px; }
.tier .rating { position: relative; top: -1px; color: #f5a524; font-size: .78rem; letter-spacing: 1px; margin-left: 2px; }
.marks.flags i svg { width: 100%; height: 100%; }
#prezzi .tier { --mark-ring: var(--paper, #1b1c22); }
#prezzi .tier.best { --mark-ring: #15161c; }
@media (max-width: 860px) { #prezzi .tiers { grid-template-rows: none; row-gap: 16px; } #prezzi .tier { grid-row: auto; grid-template-rows: none; } }