/* ========================================
   PARADOX LAB — componenti specifici
   (si aggiunge a paradox-custom.css)
   ======================================== */

:root {
  --px-green:   #0ECB81;
  --px-red:     #F6465D;
  --px-gold:    #F0B90B;
  --px-panel:   #1E2329;
  --px-panel-2: #262C34;
  --px-panel-hi:#2B3139;
  --px-display: 'ClashDisplay', 'IBM Plex Sans', 'Segoe UI', sans-serif;
}

@font-face {
  font-family: 'ClashDisplay';
  src: url('../fonts/ClashDisplay-Semibold.woff2') format('woff2'), url('../fonts/ClashDisplay-Semibold.woff') format('woff');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ClashDisplay';
  src: url('../fonts/ClashDisplay-Bold.woff2') format('woff2'), url('../fonts/ClashDisplay-Bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ClashDisplay';
  src: url('../fonts/ClashDisplay-Medium.woff2') format('woff2'), url('../fonts/ClashDisplay-Medium.woff') format('woff');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* Titoli in display font */
.px-split-headline .hl-1, .px-split-headline .hl-2,
.px-section-title, .px-page-hero-title, .px-manifesto-quote,
.px-domain-title, .px-flip-word, .px-prod-title, .px-step-title, .px-cta-title {
  font-family: var(--px-display);
  letter-spacing: 0 !important;
  word-spacing: 0.06em;
}

/* Logo header: nodo + wordmark */
.px-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.px-logo img.px-logo-knot { height: 38px; width: auto; display: block; }
.px-logo .px-wordmark {
  font-family: var(--px-display); font-weight: 600; font-size: 19px; letter-spacing: 0.01em;
  color: var(--px-white); line-height: 1;
}
.px-logo .px-wordmark span { color: var(--px-gold); }
.px-header.scrolled { background: rgba(24,26,32,0.94); }

/* ===========================
   HERO
   =========================== */
.px-hero-lab { min-height: 100vh; padding: 140px 0 60px; }
.px-hero-lab .px-hero-split { grid-template-columns: 7fr 5fr; gap: 48px; }
@media (max-width: 991px) { .px-hero-lab .px-hero-split { grid-template-columns: 1fr; } }
.px-hero-lab .px-split-headline .hl-1 { font-size: clamp(40px, 5.2vw, 78px); line-height: 1.0; }
.px-hero-lab .px-split-headline .hl-2 { color: var(--px-gold); font-size: clamp(30px, 3.6vw, 54px); }
.px-hero-lab .px-split-headline .hl-3 { color: var(--px-gray2); font-weight: 400; max-width: 640px; }
.px-hero-actions { margin-top: 36px; }
.px-hero-actions .px-btn-secondary { color: var(--px-white); }

/* Telefono con glow */
.px-hero-phone {
  position: relative; display: flex; justify-content: center; align-items: center;
}
.px-hero-phone::before {
  content: ''; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(240,185,11,0.28) 0%, rgba(240,185,11,0.05) 45%, transparent 70%);
  filter: blur(20px); z-index: 0;
}
.px-hero-phone img {
  position: relative; z-index: 1; width: min(340px, 78%); height: auto;
  transform: rotate(-4deg); filter: drop-shadow(0 30px 60px rgba(0,0,0,0.6));
  animation: px-float 6s ease-in-out infinite;
}
@keyframes px-float { 0%,100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-14px); } }

/* Chip flottanti attorno al telefono */
.px-float-chip {
  position: absolute; z-index: 2;
  background: var(--px-panel); border: 1px solid var(--px-border); border-radius: 12px;
  padding: 10px 14px; font-size: 13px; color: var(--px-gray2);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  animation: px-float 7s ease-in-out infinite;
}
.px-float-chip b { color: var(--px-white); font-weight: 600; }
.px-float-chip .up { color: var(--px-green); font-weight: 700; }
.px-float-chip .dn { color: var(--px-red); font-weight: 700; }
.px-float-chip.c1 { top: 8%; left: 0; animation-delay: -1s; }
.px-float-chip.c2 { bottom: 14%; right: 0; animation-delay: -3s; }
.px-float-chip.c3 { top: 46%; right: -4%; animation-delay: -5s; }
@media (max-width: 1200px) { .px-float-chip.c3 { display: none; } }
@media (max-width: 991px) { .px-hero-phone { margin-top: 20px; } .px-float-chip { font-size: 12px; } }

/* ===========================
   TICKER (nastro stile mercato)
   =========================== */
.px-ticker {
  border-top: 1px solid var(--px-border); border-bottom: 1px solid var(--px-border);
  background: var(--px-panel); overflow: hidden; position: relative;
}
.px-ticker::before, .px-ticker::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
}
.px-ticker::before { left: 0; background: linear-gradient(90deg, var(--px-panel), transparent); }
.px-ticker::after { right: 0; background: linear-gradient(270deg, var(--px-panel), transparent); }
.px-ticker-track {
  display: flex; gap: 0; width: max-content; animation: px-ticker 70s linear infinite;
}
.px-ticker:hover .px-ticker-track { animation-play-state: paused; }
@keyframes px-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.px-tick {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px;
  border-right: 1px solid var(--px-border); font-size: 13.5px; white-space: nowrap;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
}
.px-tick .w { color: var(--px-white); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.px-tick .not { color: var(--px-red); }
.px-tick .not::before { content: '≠ '; }
.px-tick .is { color: var(--px-green); }
.px-tick .is::before { content: '= '; }
.px-tick .lang { font-size: 10px; color: var(--px-dim, #949CA6); border: 1px solid var(--px-border); border-radius: 4px; padding: 1px 5px; }

/* ===========================
   PRODOTTI (card grandi)
   =========================== */
.px-products-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px;
}
@media (max-width: 991px) { .px-products-2 { grid-template-columns: 1fr; } }
.px-prod {
  --acc: var(--px-gold);
  background: var(--px-card); border: 1px solid var(--px-border); border-radius: var(--px-radius-lg);
  padding: 44px 40px; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 18px;
  transition: var(--transition);
}
.px-prod::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 100% 0%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 70%);
  opacity: 0.8; pointer-events: none;
}
.px-prod:hover { border-color: color-mix(in srgb, var(--acc) 45%, transparent); transform: translateY(-4px); }
.px-prod.green { --acc: var(--px-green); }
.px-prod.red { --acc: var(--px-red); }
.px-prod-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acc); }
.px-prod-title { font-size: clamp(28px, 3vw, 40px); font-weight: 700; color: var(--px-white); letter-spacing: -0.02em; line-height: 1.05; margin: 0; }
.px-prod-title small { display: block; font-family: var(--px-font); font-size: 15px; font-weight: 500; color: var(--px-gray); letter-spacing: 0; margin-top: 8px; }
.px-prod-desc { font-size: 15.5px; color: var(--px-gray); line-height: 1.75; margin: 0; }
.px-prod-points { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 8px; }
.px-prod-points li { font-size: 14px; color: var(--px-gray2); display: flex; gap: 10px; align-items: flex-start; }
.px-prod-points li::before { content: '→'; color: var(--acc); font-weight: 700; flex-shrink: 0; }
.px-prod-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }
.px-prod-visual { position: relative; z-index: 1; margin-top: auto; }
.px-prod .px-btn-primary { background: var(--acc); }
.px-prod .px-btn-primary:hover { background: var(--px-white); }

/* Store badges (SVG inline, testo) */
.px-store {
  display: inline-flex; align-items: center; gap: 10px;
  background: #0B0E11; color: var(--px-white); border: 1px solid var(--px-border);
  border-radius: 10px; padding: 8px 14px 8px 12px; text-decoration: none; transition: var(--transition);
  min-width: 150px;
}
.px-store:hover { border-color: var(--px-gold); color: var(--px-white); transform: translateY(-2px); text-decoration: none; }
.px-store svg { width: 24px; height: 24px; flex-shrink: 0; }
.px-store .s { display: flex; flex-direction: column; line-height: 1.1; }
.px-store .s small { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--px-gray); }
.px-store .s b { font-size: 15px; font-weight: 600; }

/* Mini telefoni nella card */
.px-mini-phones { display: flex; gap: 10px; justify-content: center; align-items: flex-end; margin: 14px 0 -70px; }
.px-mini-phones img { width: 30%; max-width: 150px; height: auto; border-radius: 18px; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5)); transition: var(--transition); }
.px-mini-phones img:nth-child(2) { transform: translateY(-16px); }
.px-prod:hover .px-mini-phones img:nth-child(2) { transform: translateY(-26px); }
.px-prod:hover .px-mini-phones img:nth-child(1) { transform: rotate(-3deg); }
.px-prod:hover .px-mini-phones img:nth-child(3) { transform: rotate(3deg); }

/* Wordmark TesiOra (senza immagine) */
.px-tesiora-mark {
  display: inline-flex; align-items: baseline; font-family: var(--px-display); font-weight: 700;
  font-size: 34px; letter-spacing: -0.02em; color: var(--px-white);
}
.px-tesiora-mark span { color: var(--px-green); }
.px-tesiora-mark small { font-family: var(--px-font); font-size: 13px; font-weight: 500; color: var(--px-gray); margin-left: 8px; letter-spacing: 0.06em; }

/* Timeline TesiOra (3 passi) */
.px-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
@media (max-width: 900px) { .px-steps { grid-template-columns: 1fr; } }
.px-step {
  background: var(--px-card); border: 1px solid var(--px-border); border-radius: var(--px-radius-lg);
  padding: 34px 30px; position: relative; transition: var(--transition);
}
.px-step:hover { border-color: rgba(240,185,11,0.35); }
.px-step-num { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--px-gold); letter-spacing: 0.14em; margin-bottom: 18px; }
.px-step-title { font-size: 24px; font-weight: 600; color: var(--px-white); margin-bottom: 12px; }
.px-step-desc { font-size: 14.5px; color: var(--px-gray); line-height: 1.75; margin: 0; }
.px-step-desc strong { color: var(--px-gray2); font-weight: 600; }

/* Nota di riservatezza */
.px-nda {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 36px;
  border: 1px dashed rgba(240,185,11,0.35); border-radius: 100px; padding: 10px 18px;
  font-size: 13px; color: var(--px-gray); background: rgba(240,185,11,0.04);
}
.px-nda svg { color: var(--px-gold); flex-shrink: 0; }

/* ===========================
   FLIP CARD — "Indovina il paradosso"
   =========================== */
.px-flip-wrap { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
@media (max-width: 991px) { .px-flip-wrap { grid-template-columns: 1fr; gap: 40px; } }
.px-flip-scene { perspective: 1400px; }
.px-flip {
  position: relative; width: 100%; aspect-ratio: 4/3; cursor: pointer;
  transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.px-flip.flipped { transform: rotateY(180deg); }
.px-flip-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 24px; border: 1px solid var(--px-border); background: var(--px-panel);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 32px; overflow: hidden;
}
.px-flip-face.back { transform: rotateY(180deg); border-color: rgba(14,203,129,0.45); background: linear-gradient(160deg, #1E2329, #1a2d26); }
.px-flip-face.front { background: linear-gradient(160deg, #1E2329, #2b2612); border-color: rgba(240,185,11,0.35); }
.px-flip-lang { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--px-gray); margin-bottom: 18px; }
.px-flip-word { font-size: clamp(44px, 6vw, 80px); font-weight: 700; color: var(--px-white); line-height: 1; letter-spacing: -0.02em; }
.px-flip-hint { margin-top: 22px; font-size: 14px; color: var(--px-gray); }
.px-flip-hint b { color: var(--px-red); font-weight: 600; }
.px-flip-face.back .px-flip-word { color: var(--px-green); }
.px-flip-face.back .px-flip-hint b { color: var(--px-gold); }
.px-flip-tap { position: absolute; bottom: 18px; right: 22px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--px-gray); opacity: 0.8; }
.px-flip-controls { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.px-flip-count { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--px-gray); align-self: center; }

/* ===========================
   SCUOLE strip
   =========================== */
.px-schools {
  margin-top: 24px; background: var(--px-card); border: 1px solid var(--px-border); border-radius: var(--px-radius-lg);
  padding: 40px 44px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center;
  position: relative; overflow: hidden;
}
.px-schools::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--px-gold), var(--px-red)); }
@media (max-width: 900px) { .px-schools { grid-template-columns: 1fr; } }
.px-schools h3 { font-family: var(--px-display); font-size: 26px; font-weight: 600; color: var(--px-white); margin: 0 0 10px; }
.px-schools p { font-size: 15px; color: var(--px-gray); margin: 0; line-height: 1.7; max-width: 720px; }

/* ===========================
   CTA finale
   =========================== */
.px-cta {
  border-radius: 28px; padding: 72px 48px; text-align: center; position: relative; overflow: hidden;
  background: radial-gradient(ellipse 60% 80% at 50% 120%, rgba(240,185,11,0.22), transparent 70%), var(--px-panel);
  border: 1px solid rgba(240,185,11,0.25);
}
.px-cta-title { font-size: clamp(30px, 4vw, 54px); font-weight: 700; color: var(--px-white); letter-spacing: -0.02em; margin-bottom: 14px; }
.px-cta p { color: var(--px-gray); font-size: 17px; max-width: 620px; margin: 0 auto 32px; }
.px-cta .px-hero-actions { justify-content: center; margin-top: 0; }

/* Numeri / fatti "pubblici" */
.px-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 56px; }
@media (max-width: 991px) { .px-facts { grid-template-columns: repeat(2, 1fr); } }
.px-fact { border-top: 1px solid var(--px-border); padding-top: 18px; }
.px-fact b { display: block; font-family: var(--px-display); font-size: 34px; font-weight: 700; color: var(--px-gold); line-height: 1; margin-bottom: 8px; }
.px-fact span { font-size: 13.5px; color: var(--px-gray); line-height: 1.5; display: block; }

/* Footer */
.px-footer-logo .px-logo-knot { height: 40px; width: auto; }
.px-footer-brand { font-family: var(--px-display); font-size: 20px; font-weight: 600; color: var(--px-white); margin-top: 12px; }
.px-footer-brand span { color: var(--px-gold); }

/* Pagine prodotto: hero con immagine a destra */
.px-product-hero-split { display: grid; grid-template-columns: 6fr 5fr; gap: 56px; align-items: center; }
@media (max-width: 991px) { .px-product-hero-split { grid-template-columns: 1fr; } }
.px-phone-row { display: flex; gap: 14px; justify-content: center; align-items: flex-end; }
.px-phone-row img { width: 31%; max-width: 190px; border-radius: 22px; filter: drop-shadow(0 24px 50px rgba(0,0,0,0.55)); }
.px-phone-row img:nth-child(2) { transform: translateY(-20px); }

/* Tabellina "chi è per" */
.px-for { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
@media (max-width: 900px) { .px-for { grid-template-columns: 1fr; } }
.px-for-item { background: var(--px-card); border: 1px solid var(--px-border); border-radius: 16px; padding: 26px; }
.px-for-item h4 { font-size: 17px; font-weight: 600; color: var(--px-white); margin: 0 0 8px; }
.px-for-item p { font-size: 14px; color: var(--px-gray); margin: 0; line-height: 1.7; }

/* Integrità accademica box */
.px-integrity {
  border-left: 3px solid var(--px-green); background: rgba(14,203,129,0.05); border-radius: 0 16px 16px 0;
  padding: 24px 28px; margin-top: 40px; max-width: 760px;
}
.px-integrity h4 { font-size: 15px; font-weight: 700; color: var(--px-green); margin: 0 0 8px; letter-spacing: 0.04em; text-transform: uppercase; }
.px-integrity p { font-size: 15px; color: var(--px-gray2); margin: 0; line-height: 1.75; }

/* FAQ */
.px-faq-item { border-bottom: 1px solid var(--px-border); padding: 20px 0; }
.px-faq-q { font-size: 16px; font-weight: 600; color: var(--px-white); margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.px-faq-a { font-size: 14.5px; color: var(--px-gray); line-height: 1.75; }

/* Form */
.px-form-submit {
  display: inline-flex; align-items: center; gap: 10px; background: var(--px-accent); color: var(--px-bg);
  padding: 14px 36px; border-radius: 100px; font-size: 15px; font-weight: 600; border: none; cursor: pointer;
  transition: var(--transition); width: 100%; justify-content: center;
}
.px-form-submit:hover { background: var(--px-white); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(240,185,11,0.25); }
.px-form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23949CA6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .px-ticker-track, .px-hero-phone img, .px-float-chip { animation: none; }
}