/* PrimaPosizione.ai — componenti specifici (platforms): ChatGPT, Perplexity, Gemini, Claude.
   Usa i token di styles.css. Ogni pagina riceve un accento (--p) che resta secondario ad arancio e teal. */

/* ---------- Identità della piattaforma ---------- */
.page-chatgpt { --p: #10a37f; --p-ink: #0c7d62; }
.page-perplexity { --p: #20b8cd; --p-ink: #0e7a8a; }
.page-gemini { --p: #6f7cf6; --p-ink: #4b55d1; }
.page-claude { --p: #d97757; --p-ink: #b4532f; }
:root[data-theme="dark"] .page-chatgpt { --p-ink: #34d3a6; }
:root[data-theme="dark"] .page-perplexity { --p-ink: #5fd6e6; }
:root[data-theme="dark"] .page-gemini { --p-ink: #a5adff; }
:root[data-theme="dark"] .page-claude { --p-ink: #f0a080; }
:is(.page-chatgpt, .page-perplexity, .page-gemini, .page-claude) { --p-soft: color-mix(in srgb, var(--p) 16%, transparent); --p-line: color-mix(in srgb, var(--p) 32%, transparent); }

/* Chip ed etichette nel colore della piattaforma */
.chip.is-platform { color: var(--p); background: linear-gradient(135deg, color-mix(in srgb, var(--p) 22%, transparent), rgba(255, 145, 70, .14)); border-color: var(--p-line); }
.phase-label.is-platform { color: var(--p-ink); }
a.aura-card.pf-glow:hover, a.aura-card.pf-glow:focus-visible { box-shadow: 0 10px 30px color-mix(in srgb, var(--p) 22%, transparent); }

/* ---------- Hero: badge + piattaforme ---------- */
.pf-badges .platform-dot[aria-current="page"] { color: #fff; background: var(--p); border-color: transparent; box-shadow: 0 6px 18px color-mix(in srgb, var(--p) 40%, transparent); }
.pf-badges .platform-dot[aria-current="page"]::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--p-line); animation: aura-ring 2.8s var(--ease) infinite; pointer-events: none; }
.pf-badges .platform-dot[aria-current="page"]:hover { color: #fff; }

/* ---------- Hero bento ---------- */
.pf-mini-id { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.pf-bento .bento-mini-top { align-items: center; }
.pf-bento .bento-mini .phase-label { white-space: nowrap; }
.pf-bento .bento-mini-copy p { display: inline-flex; align-items: center; gap: 6px; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .pf-bento .bento-mini :is(h2, h3) { font-size: 17px; line-height: 24px; }
  .pf-bento .bento-mini { padding: 20px; }
  .pf-bento .bento-tall { padding: 28px; }
  .pf-bento .bento-tall-title { font-size: 25px; }
  .pf-bento .bento-tall-text { font-size: 15px; }
}
.pf-bento .pill .icon { color: var(--p); }
.pf-bento .art-question .pill .icon { color: var(--orange-text); }

/* Arte "piattaforma": il simbolo al centro delle orbite, le altre aziende intorno, il tuo posto vuoto */
.art-platform .bento-art { background: radial-gradient(42% 32% at 50% 40%, color-mix(in srgb, var(--p) 58%, transparent), transparent 72%), radial-gradient(55% 42% at 84% 14%, rgba(255, 145, 70, .9), transparent 70%), radial-gradient(60% 50% at 12% 58%, rgba(70, 212, 198, .75), transparent 72%), radial-gradient(70% 45% at 72% 78%, rgba(255, 190, 140, .85), transparent 72%), linear-gradient(160deg, #e2f1ec 0%, #f4e4d6 100%); }
:root[data-theme="dark"] .art-platform .bento-art { background: radial-gradient(42% 32% at 50% 40%, color-mix(in srgb, var(--p) 50%, transparent), transparent 72%), radial-gradient(55% 42% at 84% 14%, rgba(255, 145, 70, .75), transparent 70%), radial-gradient(60% 50% at 12% 58%, rgba(70, 212, 198, .55), transparent 72%), radial-gradient(70% 45% at 72% 78%, rgba(190, 110, 60, .65), transparent 72%), linear-gradient(160deg, #10302d 0%, #2f2118 100%); }
.bento-tall.art-platform:hover, .bento-tall.art-platform:focus-visible { box-shadow: 0 20px 40px color-mix(in srgb, var(--p) 26%, transparent); }
.art-platform .ring-1 { background: rgba(255, 255, 255, .16); }
.art-platform .ring-2 { border-color: color-mix(in srgb, var(--p) 45%, #fff); }
.art-platform .orbit-core { width: 104px; height: 104px; margin: -52px 0 0 -52px; color: var(--p); background: radial-gradient(circle at 30% 25%, #fff, rgba(255, 255, 255, .82) 45%, rgba(255, 255, 255, .5)); box-shadow: 0 18px 40px rgba(0, 0, 0, .18), inset 0 -8px 16px color-mix(in srgb, var(--p) 35%, transparent), 0 0 0 10px color-mix(in srgb, var(--p) 14%, transparent); }
.art-platform .orbit-core::after { content: ''; position: absolute; inset: -12px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--p) 55%, transparent); animation: aura-ring 2.8s var(--ease) infinite; }
.art-platform .orbit-core .icon { width: 46px; height: 46px; stroke-width: 1.7; }
.art-platform .orbit-sat { width: 42px; height: 42px; color: #64748b; background: rgba(255, 255, 255, .78); }
.art-platform .orbit-sat .icon { width: 18px; height: 18px; }
.art-platform .orbit-sat.is-num { font-size: 13px; font-weight: 700; color: #334155; }
.orbit-you { position: absolute; right: 7%; top: 54%; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 9999px; border: 1px dashed rgba(234, 88, 12, .85); background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #c2410c; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 10px 24px rgba(0, 0, 0, .12); animation: aura-blink 2.2s ease-in-out infinite; }
.orbit-you::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
:root[data-theme="dark"] .orbit-you { background: rgba(17, 24, 39, .55); border-color: rgba(255, 170, 110, .85); color: #fdba74; }

/* Arte "domanda": la citazione della pagina, la piattaforma che risponde, il posto per la tua azienda */
.art-question.art-ask .bento-art { background: radial-gradient(70% 42% at 50% 104%, rgba(255, 145, 70, .8), transparent 72%), radial-gradient(50% 36% at 92% 44%, color-mix(in srgb, var(--p) 55%, transparent), transparent 70%), radial-gradient(60% 45% at 22% 14%, rgba(70, 212, 198, .5), transparent 70%), linear-gradient(180deg, #52756f 0%, #2b4745 55%, #1e3131 100%); }
/* Composizione in flusso: la bolla, la risposta e l'indicatore non si sovrappongono mai al titolo. */
.art-ask .bento-art { display: flex; flex-direction: column; align-items: stretch; gap: 18px; padding: 80px 9% 0; }
.art-ask :is(.ask-bubble, .ask-answer, .typing) { position: relative; inset: auto; }
.art-ask .ask-bubble b { font-size: 16px; }
.ask-reply { display: flex; align-items: flex-start; gap: 12px; animation: aura-bob-1 9s ease-in-out infinite; }
.ask-reply .ask-answer { flex: 1; min-width: 0; padding-top: 4px; }
.ask-from { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; color: var(--p); background: rgba(255, 255, 255, .9); box-shadow: 0 8px 20px rgba(0, 0, 0, .25), 0 0 0 4px color-mix(in srgb, var(--p) 30%, transparent); }
.ask-from .icon { width: 17px; height: 17px; }
.art-ask .ask-answer .is-you { width: max-content; max-width: 100%; }
.art-ask .typing { align-self: flex-start; margin: -6px 0 0 44px; }
.ask-answer .is-off { position: relative; width: 58%; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .42) 0 6px, rgba(255, 255, 255, .12) 6px 12px); box-shadow: inset 0 0 0 1px rgba(255, 190, 140, .55); }
.ask-src { display: flex; gap: 6px; }
.ask-src b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: rgba(255, 255, 255, .28); border: 1px solid rgba(255, 255, 255, .35); color: #fff; font-size: 11px; font-weight: 700; }
.ask-src b:last-child { border-style: dashed; border-color: rgba(255, 190, 140, .95); background: rgba(255, 145, 70, .2); color: #ffe3cc; }
@media (min-width: 1024px) { .art-ask .bento-art { padding-top: 88px; gap: 22px; } }
@media (max-width: 639px) { .art-ask .bento-art { padding-top: 76px; gap: 16px; } .art-ask .ask-bubble b { font-size: 15px; } .art-ask .typing { display: none; } }

/* ---------- Problema: la lastra illustrata riprende l'accento ---------- */
.pf-focus .discovery-example::before { background: radial-gradient(60% 55% at 58% 64%, rgba(255, 145, 70, .88), transparent 70%), radial-gradient(44% 44% at 30% 28%, color-mix(in srgb, var(--p) 62%, transparent), transparent 70%), radial-gradient(40% 40% at 80% 20%, rgba(70, 212, 198, .45), transparent 70%), linear-gradient(165deg, #f7ecdd, #ecd6b9); }
:root[data-theme="dark"] .pf-focus .discovery-example::before { background: radial-gradient(60% 55% at 58% 64%, rgba(255, 145, 70, .72), transparent 70%), radial-gradient(44% 44% at 30% 28%, color-mix(in srgb, var(--p) 55%, transparent), transparent 70%), radial-gradient(40% 40% at 80% 20%, rgba(70, 212, 198, .35), transparent 70%), linear-gradient(165deg, #3a2f25, #20252c); }

@media (max-width: 639px) { .pf-focus .discovery-example::before { width: 44%; right: -14px; bottom: -34px; } }

/* ---------- Obiettivi (Real Results) ---------- */
.pf-results .result-card { isolation: isolate; }
.pf-results .result-open .tag { align-self: flex-start; }
.pf-results .result-card::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(80% 45% at 15% 0%, color-mix(in srgb, var(--p) 12%, transparent), transparent 70%), radial-gradient(80% 45% at 90% 100%, rgba(255, 145, 70, .1), transparent 70%); opacity: .9; transition: opacity .5s var(--ease); pointer-events: none; }
.pf-results .result-card:nth-child(2)::before { background: radial-gradient(80% 45% at 15% 0%, rgba(70, 212, 198, .12), transparent 70%), radial-gradient(80% 45% at 90% 100%, rgba(255, 145, 70, .14), transparent 70%); }
.pf-results .result-card:hover { box-shadow: 0 20px 40px color-mix(in srgb, var(--p) 16%, transparent), var(--shadow-lg); }
.pf-results .result-card:hover::before { opacity: 1; }
.pf-results .result-icons .icon:first-child { color: var(--p); }
.result-avatar.is-platform { background: var(--p-ink); }
:root[data-theme="dark"] .result-avatar.is-platform { background: color-mix(in srgb, var(--p) 70%, #000); }
.pf-results .result-card:nth-child(3) .orb-button:is(:hover, :focus-visible)::after { background: var(--p); }

/* ---------- FAQ ---------- */
.pf-faq .faq-list details[open] summary { color: var(--ink); }

/* ---------- Invito finale: simbolo della piattaforma in filigrana ---------- */
.pf-next::before { background: linear-gradient(90deg, rgba(255, 145, 70, .14), color-mix(in srgb, var(--p) 14%, transparent) 38%, rgba(70, 212, 198, .14) 62%, transparent); }
/* Resta dentro i bordi orizzontali della scheda (nessuna eccedenza), sporge solo in alto e viene ritagliato. */
.pf-next .pf-next-mark { position: absolute; right: 18px; top: -48px; z-index: 0; width: 150px; height: 150px; color: var(--p); opacity: .12; pointer-events: none; transform: rotate(-12deg); }
.pf-next .pf-next-mark .icon { width: 100%; height: 100%; stroke-width: 1.1; }
@media (min-width: 768px) { .pf-next .pf-next-mark { right: 32px; top: -84px; width: 280px; height: 280px; opacity: .09; } }