/* ==============================
   Global Design Tokens & Fonts
   ============================== */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* Frutiger Aero Palette */
  --panna: #eae6ca;               
  --panna-muted: rgba(234, 230, 202, 0.7); 
  --accent-green: #71ab23;        /* Frutiger Green */
  --accent-red: #e74c3c;          
  --accent-blue: #0032db;         /* Frutiger Deep Blue */
  --accent-blue-light: #0689e4;   /* Frutiger Aero Blue */
  --accent-orange: #d55e0f;       /* Frutiger Orange */
  --accent-yellow: #fbb905;       /* Frutiger Yellow */
  --bg-light: #fdfaf2;
  --bg-dark: #020b18;             /* very deep dark blue-grey to pair with RAL 5001 */
  --text-light: #1a1a1a;
  --text-dark: #eae6ca;           /* RAL 9001 */
  --glass-bg-light: rgba(255, 255, 255, 0.15);
  --glass-bg-dark: rgba(6, 137, 228, 0.25); /* RAL 5001 based translucent glass */
  --glass-blur: blur(24px);
  --border-color: rgba(234, 230, 202, 0.15);
  --border-hover: rgba(225, 85, 1, 0.5); /* RAL 2011 hover border */
  --accent-green-glow: rgba(225, 85, 1, 0.3); /* RAL 2011 glow */
  
  --font-body: 'EasyReading', 'Lexend', sans-serif;
  --font-heading: 'EasyReading', 'Lexend', sans-serif;
}

/* Global Reset Anti-Overflow */
*, *::before, *::after {
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
img, video, canvas {
  max-width: 100%;
}

/* Toggle button styles */
.theme-toggle,
.audio-toggle {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--glass-bg-light);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 18px;
  color: var(--panna);
}

.theme-toggle:hover,
.audio-toggle:hover {
  background: var(--glass-bg-dark);
  border-color: var(--accent-green);
  transform: scale(1.05);
}

/* Dark‑mode overrides */
body.dark-mode {
  --bg: var(--bg-dark);
  --text: var(--text-dark);
  --glass-bg: var(--glass-bg-dark);
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  background: var(--bg, var(--bg-light));
  color: var(--text, var(--text-light));
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  margin: 0;
}

html {
    background-color: var(--bg-dark);
}

body {
    background-color: transparent;
    color: var(--panna);
    font-family: var(--font-body);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    position: relative;
    background-attachment: fixed;
}

/* Background Particles */
#particle-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.particle {
    position: absolute;
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(52, 152, 219, 0.15) 100%);
    box-shadow: 
        inset 0 1px 3px rgba(255, 255, 255, 0.6),
        0 2px 6px rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    pointer-events: none;
    will-change: transform, opacity;
}

/* Audio Banner */
.audio-banner {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(7, 9, 12, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    color: var(--panna-muted);
}

/* App Header */
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 40px;
    z-index: 10;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Bottone "altre opzioni": esiste solo per raggruppare audio/suggerisci/reset
   su mobile (vedi html.is-mobile sotto). Su desktop resta sempre nascosto e
   i tre bottoni restano visibili come prima. */
#header-menu-toggle {
    display: none;
}

.header-logo {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -1px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-accent {
    animation: pulse 2.5s infinite alternate;
}

.logo-bold {
    color: var(--accent-green);
    text-shadow: 0 0 15px var(--accent-green-glow);
}

.header-subtitle {
    font-size: 13px;
    color: var(--panna-muted);
}

/* App Container */
.app-container {
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 80px 20px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Category Bubble Selection Grid */
.category-bubble-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 24px;
    justify-items: center;
    margin: 40px 0;
}

.category-bubble {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.03) 50%, rgba(0, 0, 0, 0.45) 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 
        inset 0 4px 8px rgba(255, 255, 255, 0.35),
        inset 0 -4px 10px rgba(0, 0, 0, 0.5),
        0 10px 25px rgba(0, 0, 0, 0.35);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

/* Make them float gently at different speeds */
.category-bubble:nth-child(odd) {
    animation: bubbleFloat 4s ease-in-out infinite alternate;
}
.category-bubble:nth-child(even) {
    animation: bubbleFloat 5s ease-in-out infinite alternate-reverse;
}

.category-bubble:hover {
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.35) 0%, rgba(46, 204, 113, 0.15) 50%, rgba(0, 0, 0, 0.5) 100%);
    border-color: rgba(46, 204, 113, 0.6);
    transform: scale(1.15) translateY(-8px);
    box-shadow: 
        inset 0 4px 10px rgba(255, 255, 255, 0.45),
        inset 0 -4px 10px rgba(46, 204, 113, 0.35),
        0 15px 35px rgba(46, 204, 113, 0.3);
}

.category-bubble:active {
    transform: scale(0.95);
    transition: transform 0.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.category-bubble .bubble-icon {
    font-size: 38px;
    margin-bottom: 6px;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
    transition: transform 0.3s ease;
}

.category-bubble:hover .bubble-icon {
    transform: scale(1.2) rotate(5deg);
}

.category-bubble .bubble-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 12px;
    color: var(--panna-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.category-bubble:hover .bubble-title {
    color: var(--panna);
}

/* Bolla madre — sostituisce le ~27 sfere all'apertura per un primo impatto
   più pulito. Un solo invito grande e pulsante, che rivela il resto al click. */
.master-bubble {
    width: 190px;
    height: 190px;
    animation: masterBubblePulse 2.6s ease-in-out infinite;
}

.master-bubble .bubble-icon {
    font-size: 54px;
}

.master-bubble .bubble-title {
    font-size: 14px;
    max-width: 130px;
    text-align: center;
    line-height: 1.3;
}

@keyframes masterBubblePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.35), 0 10px 25px rgba(0,0,0,0.35); }
    50% { box-shadow: 0 0 0 16px rgba(46, 204, 113, 0), 0 10px 25px rgba(0,0,0,0.35); }
}

/* Fallback a media query pura (non solo html.is-mobile): copre anche schermi
   piccoli senza touch rilevato correttamente (es. finestra desktop stretta). */
@media (max-width: 480px) {
    .master-bubble { width: 150px; height: 150px; }
    .master-bubble .bubble-icon { font-size: 42px; }
    .master-bubble .bubble-title { font-size: 13px; }
}

/* Macro-Categorie Tabs styling */
.category-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 25px auto 10px auto;
    max-width: 900px;
    padding: 10px;
}

.category-tab {
    background: rgba(253, 250, 242, 0.02);
    border: 1px solid var(--border-color);
    padding: 10px 20px;
    border-radius: 30px;
    color: var(--panna-muted);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.category-tab:hover {
    background: rgba(253, 250, 242, 0.08);
    color: var(--panna);
    transform: translateY(-2px);
    border-color: var(--accent-green);
}

.category-tab.active {
    background: rgba(46, 204, 113, 0.15);
    border-color: var(--accent-green);
    color: #2ecc71;
    box-shadow: 0 0 15px var(--accent-green-glow);
    transform: translateY(-2px);
}

/* Animazione di apparizione per il filtraggio */
@keyframes tabFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.category-bubble.fade-in {
    animation: tabFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Glass Panels */
.glass-panel {
    background: var(--glass-bg-dark);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-top: 1.5px solid rgba(255, 255, 255, 0.35);
    border-left: 1.5px solid rgba(255, 255, 255, 0.25);
    border-radius: 48px;
    padding: 45px;
    box-shadow:
        inset 0 2px 5px rgba(255, 255, 255, 0.15),
        0 20px 50px rgba(0, 0, 0, 0.4);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    /* .app-container è flex column e queste card usano "margin: ... auto"
       per centrarsi: il margine auto disattiva lo stretch di default e fa
       sì che la card si dimensioni sul contenuto ("shrink-to-fit"). Senza
       width:100% qui, un discendente con min-width fisso (es. la tabella
       comparativa) allarga la card oltre il viewport invece di scrollare
       al suo interno → overflow orizzontale su schermi stretti. */
    width: 100%;
    min-width: 0;
}

.glass-panel:hover {
    border-color: var(--border-hover);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}

h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 38px;
    letter-spacing: -0.5px;
    margin-bottom: 16px;
}

p {
    line-height: 1.6;
}

.subtitle {
    font-size: 18px;
    margin-bottom: 35px;
    color: var(--panna-muted);
}

.text-center { text-align: center; }
.text-muted { color: var(--panna-muted); }
.text-success { color: var(--accent-green); }
.text-error { color: var(--accent-red); }
.font-italic { font-style: italic; }
.hidden { display: none !important; }

/* Buttons */
.btn {
    font-family: var(--font-body);
    font-weight: 700;
    padding: 14px 32px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    transform: scale(1);
}

.btn:active {
    transform: scale(0.96) !important;
    transition: transform 0.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-primary {
    background: var(--accent-green);
    color: var(--panna);
    box-shadow: 0 4px 15px var(--accent-green-glow);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.45);
}

.btn-secondary {
    background: rgba(253, 250, 242, 0.03);
    border: 1px solid var(--border-color);
    color: var(--panna);
}

.btn-secondary:hover {
    background: rgba(253, 250, 242, 0.08);
    border-color: var(--border-hover);
    transform: translateY(-1px);
}

.btn-success {
    background: var(--accent-green);
    color: var(--panna);
    box-shadow: 0 4px 15px var(--accent-green-glow);
    animation: buttonPulse 2s infinite;
}

.btn-success:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.45);
}

.btn-large {
    padding: 18px 45px;
    font-size: 18px;
    border-radius: 999px;
}

.btn-full {
    width: 100%;
}

.btn-bubble {
    border-radius: 999px;
}

/* Inputs & select */
input, select {
    border-radius: 20px !important;
    background: rgba(253, 250, 242, 0.02) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--panna) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

input:focus, select:focus {
    outline: none !important;
    border-color: var(--accent-green) !important;
    box-shadow: 0 0 12px var(--accent-green-glow) !important;
}

/* Range slider custom styling */
input[type=range] {
    -webkit-appearance: none;
    background: rgba(253, 250, 242, 0.08);
    height: 6px;
    border-radius: 3px;
    outline: none;
    border: none !important;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-green);
    cursor: pointer;
    box-shadow: 0 0 8px var(--accent-green-glow);
    transition: transform 0.1s;
}

input[type=range]::-webkit-slider-thumb:hover {
    transform: scale(1.3);
}

/* Quiz UI */
.progress-container {
    margin-bottom: 45px;
}

.progress-bar-wrapper {
    height: 8px;
    background: rgba(253, 250, 242, 0.03);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}

.progress-bar {
    height: 100%;
    background: var(--accent-green);
    border-radius: 4px;
    width: 0%;
    box-shadow: 0 0 12px var(--accent-green-glow);
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.progress-text {
    font-size: 12px;
    color: var(--panna-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

.question-container {
    display: flex;
    flex-direction: column;
    gap: 18px;
    will-change: transform, opacity;
}

.psycho-tag {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--panna-muted);
    letter-spacing: 1.8px;
    background: rgba(253, 250, 242, 0.04);
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    border-radius: 12px;
    align-self: flex-start;
}

.question-text {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.options-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 15px;
}

@media (min-width: 768px) {
    .options-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.option-card {
    background: rgba(253, 250, 242, 0.015);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 26px;
    cursor: pointer;
    text-align: left;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

.option-card:hover {
    background: rgba(253, 250, 242, 0.05);
    border-color: var(--accent-green);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.15);
}

.option-card:active {
    transform: translateY(-1px) scale(0.96);
    transition: transform 0.1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Comparison Layout (3 Columns with spring animation) */
.result-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
    margin-top: 20px;
}

@media (min-width: 1200px) {
    .result-layout {
        grid-template-columns: 340px 1fr 380px;
    }
}

.result-side-col {
    padding: 35px 28px;
    border-radius: 30px;
}
}

.btn-secondary {
    background: rgba(253, 250, 242, 0.03);
    border: 1px solid var(--border-color);
    color: var(--panna);
}

.btn-secondary:hover {
    background: rgba(253, 250, 242, 0.08);
    border-color: var(--border-hover);
    transform: translateY(-1px);
}

.btn-success {
    background: var(--accent-green);
    color: var(--panna);
    box-shadow: 0 4px 15px var(--accent-green-glow);
    animation: buttonPulse 2s infinite;
}

.btn-success:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.45);
}

.btn-large {
    padding: 18px 45px;
    font-size: 18px;
    border-radius: 999px;
}

.btn-full {
    width: 100%;
}

.btn-bubble {
    border-radius: 999px;
}

/* Inputs & select */
input, select {
    border-radius: 20px !important;
    background: rgba(253, 250, 242, 0.02) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--panna) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

input:focus, select:focus {
    outline: none !important;
    border-color: var(--accent-green) !important;
    box-shadow: 0 0 12px var(--accent-green-glow) !important;
}

/* Range slider custom styling */
input[type=range] {
    -webkit-appearance: none;
    background: rgba(253, 250, 242, 0.08);
    height: 6px;
    border-radius: 3px;
    outline: none;
    border: none !important;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-green);
    cursor: pointer;
    box-shadow: 0 0 8px var(--accent-green-glow);
    transition: transform 0.1s;
}

input[type=range]::-webkit-slider-thumb:hover {
    transform: scale(1.3);
}

/* Quiz UI */
.progress-container {
    margin-bottom: 45px;
}

.progress-bar-wrapper {
    height: 8px;
    background: rgba(253, 250, 242, 0.03);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}

.progress-bar {
    height: 100%;
    background: var(--accent-green);
    border-radius: 4px;
    width: 0%;
    box-shadow: 0 0 12px var(--accent-green-glow);
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.progress-text {
    font-size: 12px;
    color: var(--panna-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

.question-container {
    display: flex;
    flex-direction: column;
    gap: 18px;
    will-change: transform, opacity;
}

.psycho-tag {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--panna-muted);
    letter-spacing: 1.8px;
    background: rgba(253, 250, 242, 0.04);
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    border-radius: 12px;
    align-self: flex-start;
}

.question-text {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.options-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 15px;
}

@media (min-width: 768px) {
    .options-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.option-card {
    background: rgba(253, 250, 242, 0.015);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 26px;
    cursor: pointer;
    text-align: left;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

.option-card:hover {
    background: rgba(253, 250, 242, 0.05);
    border-color: var(--accent-green);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.15);
}

.option-card:active {
    transform: translateY(-1px) scale(0.96);
    transition: transform 0.1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Comparison Layout (3 Columns with spring animation) */
.result-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
    margin-top: 20px;
}

@media (min-width: 1200px) {
    .result-layout {
        grid-template-columns: 340px 1fr 380px;
    }
}

.result-side-col {
    padding: 35px 28px;
    border-radius: 30px;
}

.negative-col {
    animation: slideInLeft 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards;
}

.positive-col {
    animation: slideInRight 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards;
}

.pulse {
	animation: cta-pulse 2s infinite ease-in-out;
}

@keyframes cta-pulse {
	0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 153, 0, 0.4); }
	50% { transform: scale(1.02); box-shadow: 0 0 20px 5px rgba(255, 153, 0, 0.2); }
	100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 153, 0, 0); }
}

.col-title {
    font-size: 22px;
    margin-bottom: 6px;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.5px;
}

.col-subtitle {
    font-size: 13px;
    color: var(--panna-muted);
    margin-bottom: 24px;
}

.reason-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.reason-list li {
    font-size: 14.5px;
    position: relative;
    padding-left: 28px;
    line-height: 1.5;
    color: var(--panna-muted);
}

.negative-col .reason-list li::before {
    content: "✕";
    position: absolute;
    left: 0;
    color: var(--accent-red);
    font-weight: 800;
}

.positive-col .reason-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--accent-green);
    font-weight: 800;
}

/* Product Floating Card (CSS 3D simulation with spring entry) */
.result-center-col {
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1200px;
    padding: 20px 0;
    animation: scaleInSpring 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards;
}

.floating-3d-card-wrapper {
    width: 100%;
    max-width: 420px;
    transform-style: preserve-3d;
}

.product-3d-card {
    position: relative;
    width: 100%;
    background: rgba(15, 19, 26, 0.55);
    border: 1px solid var(--border-color);
    border-radius: 36px;
    padding: 40px;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.65);
    transform-style: preserve-3d;
    transition: transform 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: transform;
    overflow: hidden;
}

.card-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(253, 250, 242, 0.15) 0%, rgba(253, 250, 242, 0) 55%);
    pointer-events: none;
    z-index: 2;
}

.longevity-score-badge {
    display: inline-block;
    background: var(--accent-green);
    color: var(--panna);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 13px;
    padding: 6px 16px;
    border-radius: 20px;
    box-shadow: 0 4px 10px var(--accent-green-glow);
    transform: translateZ(40px);
}

.product-visual-container {
    height: 190px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 22px;
    transform: translateZ(60px);
}

.product-3d-mesh {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mesh-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(253, 250, 242, 0.08);
}

.layer-back {
    background: radial-gradient(circle, rgba(16, 185, 129, 0.18) 0%, rgba(244, 63, 94, 0.1) 100%);
    animation: rotateMeshBack 12s linear infinite;
}

.layer-front {
    border: 1px dashed rgba(253, 250, 242, 0.2);
    animation: rotateMeshFront 8s linear infinite;
}

.mesh-icon {
    font-size: 64px;
    z-index: 5;
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.5));
    animation: floatIcon 4s ease-in-out infinite;
}

.product-details {
    text-align: center;
    transform: translateZ(30px);
}

.product-details h2 {
    font-size: 24px;
    margin-bottom: 8px;
    font-weight: 700;
}

.product-price {
    font-size: 24px;
    font-weight: 800;
    color: var(--accent-green);
    margin-bottom: 18px;
    text-shadow: 0 0 10px var(--accent-green-glow);
}

/* Downselling Banner */
.downsell-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
    padding: 20px;
    border-radius: 24px;
    margin-bottom: 24px;
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.1);
    position: relative;
    overflow: hidden;
}

.downsell-sparkle {
    font-size: 28px;
    animation: wiggle 1.2s ease infinite alternate;
}

.downsell-banner h4 {
    font-family: var(--font-heading);
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--panna-muted);
    text-transform: uppercase;
}

.money-saved-text {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 800;
    color: var(--accent-green);
    text-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
}

.result-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 30px;
}

/* Footer */
.app-footer {
    border-top: 1px solid var(--border-color);
    padding: 30px;
    text-align: center;
    color: var(--panna-muted);
    font-size: 12px;
}

/* Animations */
.fade-in-card {
    animation: viewFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes viewFadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); }
}

@keyframes wiggle {
    0% { transform: rotate(-8deg); }
    100% { transform: rotate(8deg); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleInSpring {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes buttonPulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    70% { box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

@keyframes bubbleFloat {
    from { transform: translateY(0px) rotate(0deg); }
    to { transform: translateY(-8px) rotate(2deg); }
}

.savings-chest {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.3s ease;
}

.opacity-0 {
    opacity: 0;
}

.alternative-card {
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.25s ease, box-shadow 0.25s ease;
}

.alternative-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border-color: var(--accent-green) !important;
}/* Custom Range Sliders */
input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(253, 250, 242, 0.08) !important;
    outline: none;
    margin: 10px 0;
    transition: all 0.2s ease;
    border: none !important;
}

input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    border-radius: 999px;
}

input[type="range"]::-webkit-slider-thumb {
    height: 22px;
    width: 22px;
    border-radius: 50%;
    background: var(--accent-green);
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -7px;
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.5);
    transition: transform 0.15s ease, background-color 0.15s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.25);
    background: var(--accent-orange);
    box-shadow: 0 0 15px rgba(230, 126, 34, 0.6);
}

input[type="range"]::-moz-range-thumb {
    height: 22px;
    width: 22px;
    border-radius: 50%;
    background: var(--accent-green);
    cursor: pointer;
    border: none;
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.5);
    transition: transform 0.15s ease, background-color 0.15s ease;
}

input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.25);
    background: var(--accent-orange);
    box-shadow: 0 0 15px rgba(230, 126, 34, 0.6);
}

/* Context Selection Chips */
.context-chip {
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(253, 250, 242, 0.03);
    border: 1px solid var(--border-color);
    color: var(--panna-muted);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    user-select: none;
}

.context-chip:hover {
    background: rgba(253, 250, 242, 0.08);
    border-color: var(--panna);
    color: var(--panna);
}

.context-chip.active {
    background: rgba(46, 204, 113, 0.15) !important;
    border-color: var(--accent-green) !important;
    color: var(--panna) !important;
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.15);
}

.active-mode {
    background: rgba(46, 204, 113, 0.15) !important;
    border-color: var(--accent-green) !important;
    color: var(--panna) !important;
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.15);
}
/* Comparison Table Styling */
table {
    border-collapse: separate;
    border-spacing: 0;
}

th, td {
    padding: 14px 18px !important;
    border-bottom: 1px solid rgba(253, 250, 242, 0.05);
    transition: background-color 0.2s ease;
}

tr:last-child td {
    border-bottom: none;
}

tr:hover td {
    background: rgba(253, 250, 242, 0.015);
}

thead th {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
}

/* SPLASH SCREEN */
.splash-screen {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--bg-dark);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 1s ease-out, visibility 1s ease-out;
}
.splash-screen.hidden {
    opacity: 0;
    visibility: hidden;
}
.splash-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.splash-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
    animation: floating 3s ease-in-out infinite;
}
.splash-title {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 800;
    color: var(--panna);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 10px 0;
}
.splash-subtitle {
    font-size: 14px;
    color: var(--accent-green);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ==============================
   MOBILE RESPONSIVENESS
   ============================== */
@media (max-width: 768px) {
    .glass-panel, .result-side-col, #situational-needs-box, .salary-calc-box {
        padding: 20px !important;
        border-radius: 20px !important;
    }
    
    .app-container {
        padding: 0 12px 40px 12px !important;
        margin-top: 20px !important;
    }
    
    .header-logo h1 {
        font-size: 24px !important;
    }
    
    .splash-title {
        font-size: 24px !important;
    }
    
    h2.question-title {
        font-size: 22px !important;
    }
    
    .btn-full {
        width: 100% !important;
    }
    
    .result-layout {
        gap: 16px !important;
    }
    
    #comparison-table-box {
        padding: 16px !important;
        border-radius: 16px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Ensure table can scroll smoothly (il contenitore sopra deve poter
       scrollare in orizzontale: senza overflow-x qui, il min-width sotto
       sfonda la card e manda in overflow tutta la pagina) */
    #comparison-table-box table {
        min-width: 450px !important;
    }
    
    .category-bubble-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
        gap: 10px !important;
    }
    
    .options-grid {
        grid-template-columns: 1fr !important;
    }
    
    .dopamine-metrics {
        flex-direction: column !important;
        gap: 12px !important;
    }
}

/* ============================================================
   FRUTIGER AERO ENHANCEMENTS + VIDEO GAME LOADING SCREEN
   ============================================================ */

/* Aqua gradient background */
body {
    background-image: none; /* Removed for WebGL */
}

/* Glass panels — more aqua gloss */
.glass-panel {
    background: linear-gradient(
        135deg,
        rgba(6, 137, 228, 0.12) 0%,
        rgba(255, 255, 255, 0.04) 50%,
        rgba(113, 171, 35, 0.06) 100%
    ) !important;
    backdrop-filter: blur(32px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(32px) saturate(1.4) !important;
    border: 1px solid rgba(6, 137, 228, 0.2) !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
}

/* Category bubbles — glossy aqua spheres */
.category-bubble {
    background: radial-gradient(
        circle at 30% 25%,
        rgba(6, 137, 228, 0.45) 0%,
        rgba(113, 171, 35, 0.15) 45%,
        rgba(2, 11, 24, 0.8) 100%
    ) !important;
    border: 1.5px solid rgba(6, 137, 228, 0.4) !important;
    box-shadow:
        0 8px 24px rgba(6, 137, 228, 0.2),
        inset 0 1px 3px rgba(255, 255, 255, 0.25),
        inset 0 -2px 6px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.category-bubble:hover {
    transform: scale(1.12) translateY(-4px) !important;
    box-shadow:
        0 16px 40px rgba(6, 137, 228, 0.4),
        0 0 0 2px rgba(6, 137, 228, 0.5),
        inset 0 1px 3px rgba(255, 255, 255, 0.4) !important;
    border-color: rgba(6, 137, 228, 0.8) !important;
}

/* Buttons — aqua glossy */
.btn-primary {
    background: linear-gradient(
        160deg,
        rgba(113, 171, 35, 0.9) 0%,
        rgba(80, 140, 20, 0.95) 100%
    ) !important;
    box-shadow:
        0 4px 20px rgba(113, 171, 35, 0.4),
        inset 0 1px 0 rgba(255,255,255,0.25),
        inset 0 -2px 0 rgba(0,0,0,0.2) !important;
    border: 1px solid rgba(113, 171, 35, 0.6) !important;
    transition: all 0.25s ease !important;
}
.btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(113, 171, 35, 0.5), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}

/* Scia di energia sui bottoni principali — stesso "potere" della barra
   "Calcolo del match": un riflesso luminoso che scorre a intervalli. */
.btn-primary {
    position: relative;
    overflow: hidden;
}
.btn-primary::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, 0.38) 50%, transparent 75%);
    transform: translateX(-120%);
    animation: btnPowerSweep 3.4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes btnPowerSweep {
    0%, 18%   { transform: translateX(-120%); }
    58%, 100% { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
    .btn-primary::after { animation: none; display: none; }
}

/* ============================================================
   HOMEPAGE — due porte nette (Concept B): "Per me" / "Regalo"
   ============================================================ */
.intent-doors {
    display: flex;
    gap: 18px;
    max-width: 620px;
    margin: 0 auto;
    flex-wrap: wrap;
}
.intent-door {
    flex: 1 1 240px;
    text-align: center;
    padding: 28px 22px;
    border-radius: 28px;
    cursor: pointer;
    position: relative;
    background: linear-gradient(135deg, rgba(6,137,228,0.12), rgba(46,204,113,0.12));
    border: 1px solid rgba(6,137,228,0.35);
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s, border-color 0.25s;
}
.intent-door-gift {
    background: linear-gradient(135deg, rgba(230,126,34,0.14), rgba(155,89,182,0.14));
    border-color: rgba(230,126,34,0.4);
}
.intent-door:hover, .intent-door:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(6,137,228,0.28);
    outline: none;
    border-color: var(--accent-blue-light);
}
.intent-door-gift:hover, .intent-door-gift:focus-visible {
    box-shadow: 0 14px 34px rgba(230,126,34,0.30);
    border-color: var(--accent-orange);
}
.intent-door-icon { font-size: 46px; display: block; margin-bottom: 10px; }
.intent-door h3 { font-family: var(--font-heading); font-size: 19px; margin: 0 0 6px; color: var(--panna); }
.intent-door-me h3 { color: var(--accent-blue-light); }
.intent-door-gift h3 { color: var(--accent-orange); }
.intent-door p { font-size: 13px; color: var(--panna-muted); margin: 0; line-height: 1.45; }
.intent-door-go { display: inline-block; margin-top: 12px; font-size: 20px; }
.forme-back {
    background: none;
    border: none;
    color: var(--panna-muted);
    cursor: pointer;
    font-size: 13px;
    padding: 4px 8px;
    margin-bottom: 4px;
    transition: color 0.2s ease;
}
.forme-back:hover { color: var(--panna); }
.bubble-sub {
    display: block;
    font-size: 11px;
    color: var(--panna-muted);
    margin-top: 3px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.2;
}

/* Context chips */
.context-chip {
    background: rgba(6, 137, 228, 0.1);
    border: 1px solid rgba(6, 137, 228, 0.3);
    color: rgba(234, 230, 202, 0.85);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
}
.context-chip:hover, .context-chip.active {
    background: rgba(6, 137, 228, 0.3);
    border-color: rgba(6, 137, 228, 0.7);
    color: #fff;
    box-shadow: 0 0 12px rgba(6, 137, 228, 0.3);
}

/* Glow pulsing animation */
@keyframes aquaGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(6, 137, 228, 0.3), inset 0 1px 0 rgba(255,255,255,0.1); }
    50% { box-shadow: 0 0 35px rgba(6, 137, 228, 0.6), inset 0 1px 0 rgba(255,255,255,0.2); }
}

/* === VIDEO GAME LOADING SCREEN === */
.loading-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    background: rgba(6, 137, 228, 0.1);
    border-bottom: 1px solid rgba(6, 137, 228, 0.25);
}
.loading-header-dots { display: flex; gap: 6px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot-red { background: #e74c3c; box-shadow: 0 0 6px #e74c3c; }
.dot-yellow { background: #f1c40f; box-shadow: 0 0 6px #f1c40f; }
.dot-green { background: #71ab23; box-shadow: 0 0 6px #71ab23; animation: pulseGreen 2s infinite; }
@keyframes pulseGreen { 0%,100%{opacity:1} 50%{opacity:0.5} }

.loading-header-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    color: rgba(6, 137, 228, 0.8);
    text-transform: uppercase;
}
.loading-header-status {
    font-size: 10px;
    font-weight: 700;
    color: #71ab23;
    letter-spacing: 1px;
    animation: blink 1.2s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.2} }

.loading-body { padding: 40px 40px 30px; }

/* Orb */
.loading-orb-container { position: relative; width: 140px; height: 140px; margin: 0 auto 30px; }
.loading-orb { position: relative; width: 140px; height: 140px; }
.orb-core {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 70px; height: 70px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(6,137,228,0.8), rgba(2,11,24,0.9));
    box-shadow: 0 0 30px rgba(6,137,228,0.6), inset 0 2px 4px rgba(255,255,255,0.3);
    display: flex; align-items: center; justify-content: center;
    z-index: 3;
}
.orb-icon { font-size: 28px; }
.orb-ring {
    position: absolute; top: 50%; left: 50%;
    border-radius: 50%;
    border: 1.5px solid rgba(6, 137, 228, 0.4);
    transform-origin: center;
}
.orb-ring-1 {
    width: 100px; height: 100px;
    margin: -50px 0 0 -50px;
    animation: orbitRing 3s linear infinite;
    border-color: rgba(6, 137, 228, 0.5);
    border-top-color: transparent;
}
.orb-ring-2 {
    width: 124px; height: 124px;
    margin: -62px 0 0 -62px;
    animation: orbitRing 5s linear infinite reverse;
    border-color: rgba(113, 171, 35, 0.3);
    border-right-color: transparent;
}
.orb-ring-3 {
    width: 140px; height: 140px;
    margin: -70px 0 0 -70px;
    animation: orbitRing 7s linear infinite;
    border-color: rgba(6, 137, 228, 0.15);
}
@keyframes orbitRing { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Operation label */
.loading-op-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 4px;
    color: rgba(6, 137, 228, 0.7);
    text-transform: uppercase;
    margin-bottom: 12px;
    font-family: monospace;
}

/* Main phrase */
.loading-phrase {
    font-size: 15px;
    color: var(--panna);
    font-weight: 600;
    margin: 0 0 20px;
    min-height: 44px;
    line-height: 1.5;
}

/* Matrix lines */
.loading-matrix {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(6, 137, 228, 0.15);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 24px;
    text-align: left;
}
.matrix-line {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: rgba(113, 171, 35, 0.8);
    padding: 2px 0;
    transition: color 0.3s;
}
.matrix-line.active { color: #71ab23; }
.matrix-line.done { color: rgba(113, 171, 35, 0.4); }

/* Energy bar */
.loading-energy-container { margin-bottom: 20px; }
.loading-energy-label {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(234, 230, 202, 0.5);
    margin-bottom: 8px;
    text-transform: uppercase;
}
#loading-percent { color: #71ab23; }
.loading-energy-bar {
    position: relative;
    height: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
}
.loading-energy-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #0689e4, #71ab23);
    border-radius: 4px;
    transition: width 0.5s ease;
    position: relative;
    z-index: 1;
}
.loading-energy-glow {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 40px;
    background: linear-gradient(90deg, transparent, rgba(113,171,35,0.6));
    border-radius: 4px;
    animation: energySweep 2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes energySweep {
    0% { opacity: 0; transform: translateX(-100px); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: translateX(0); }
}

/* ── Sotto-metriche del loader (2 barre con dinamiche diverse dal match) ── */
.loading-substats {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: -6px 0 20px;
}
.loading-substat-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: rgba(234, 230, 202, 0.45);
    margin-bottom: 6px;
    text-transform: uppercase;
}
.substat-value { font-variant-numeric: tabular-nums; }
.substat-scan { color: #f0a830; }        /* ambra: scansione catalogo */
.substat-conf { color: #71ab23; }         /* verde: confidenza */
.loading-subbar {
    position: relative;
    height: 5px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    overflow: hidden;
}
.loading-subbar-fill {
    height: 100%;
    width: 0%;
    border-radius: 3px;
    position: relative;
}
/* scan: decelera → transizione lunga e morbida (ease-out) */
.subbar-scan {
    background: linear-gradient(90deg, #b5651d, #f0a830);
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
/* confidenza: sale a scatti → transizione corta e "scattante" (ease-in) */
.subbar-conf {
    background: linear-gradient(90deg, #4d7d0f, #8ed11e);
    transition: width 0.25s cubic-bezier(0.7, 0, 0.84, 0);
    box-shadow: 0 0 8px rgba(142, 209, 30, 0.35);
}

/* Phases */
.loading-phases {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(234,230,202,0.35);
    font-weight: 700;
}
.loading-phase { transition: color 0.4s; }
.loading-phase.active { color: #71ab23; }
.loading-phase-sep { color: rgba(6,137,228,0.4); }

/* Quiz slider question */
.quiz-slider-container {
    width: 100%;
    max-width: 500px;
    margin: 20px auto;
    padding: 24px;
    background: rgba(6, 137, 228, 0.06);
    border: 1px solid rgba(6, 137, 228, 0.2);
    border-radius: 20px;
}
.quiz-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--panna-muted);
    margin-bottom: 12px;
    font-weight: 600;
}
.quiz-slider-value {
    text-align: center;
    font-size: 28px;
    font-weight: 800;
    color: #0689e4;
    margin: 12px 0;
    text-shadow: 0 0 20px rgba(6, 137, 228, 0.5);
    transition: all 0.15s ease;
}
.quiz-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, #0689e4 var(--val,50%), rgba(255,255,255,0.1) var(--val,50%));
    outline: none;
    cursor: pointer;
}
.quiz-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.6), #0689e4);
    box-shadow: 0 0 12px rgba(6,137,228,0.6), 0 2px 6px rgba(0,0,0,0.3);
    cursor: pointer;
    border: 2px solid rgba(255,255,255,0.3);
    transition: transform 0.15s ease;
}
.quiz-slider::-webkit-slider-thumb:active { transform: scale(1.25); }
.quiz-slider-confirm {
    margin-top: 16px;
    width: 100%;
}

/* Offline simulation badge */
.simulation-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(230, 126, 34, 0.12);
    border: 1px solid rgba(230, 126, 34, 0.35);
    color: #e67e22;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    animation: pulseOrange 3s infinite;
}
@keyframes pulseOrange {
    0%,100% { box-shadow: 0 0 0 0 rgba(230,126,34,0.3); }
    50% { box-shadow: 0 0 0 4px rgba(230,126,34,0); }
}

/* Floating orbs background (decorative) */
.bg-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
    animation: orbFloat 8s ease-in-out infinite;
}
.bg-orb-1 {
    width: 400px; height: 400px;
    top: -100px; left: -100px;
    background: radial-gradient(circle, rgba(6,137,228,0.12) 0%, transparent 70%);
    animation-delay: 0s;
}
.bg-orb-2 {
    width: 300px; height: 300px;
    top: 30%; right: -80px;
    background: radial-gradient(circle, rgba(113,171,35,0.1) 0%, transparent 70%);
    animation-delay: -3s;
}
.bg-orb-3 {
    width: 250px; height: 250px;
    bottom: 10%; left: 20%;
    background: radial-gradient(circle, rgba(6,137,228,0.08) 0%, transparent 70%);
    animation-delay: -5s;
}
@keyframes orbFloat {
    0%,100% { transform: translateY(0) scale(1); }
    33% { transform: translateY(-20px) scale(1.05); }
    66% { transform: translateY(10px) scale(0.97); }
}

/* Header glassmorphism upgrade */
.app-header {
    background: rgba(6, 137, 228, 0.05) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(6, 137, 228, 0.15) !important;
    padding: 16px 32px !important;
}

/* New header logo */
.header-logo {
    font-size: 26px !important;
    background: linear-gradient(135deg, #eae6ca 30%, #0689e4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Quiz option buttons Frutiger style */
.btn-option-frutiger {
    background: linear-gradient(135deg, rgba(6,137,228,0.1) 0%, rgba(113,171,35,0.05) 100%);
    border: 1px solid rgba(6, 137, 228, 0.25);
    color: var(--panna);
    padding: 16px 24px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    text-align: center;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
}
.btn-option-frutiger::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(6,137,228,0.1), transparent);
    transition: left 0.4s ease;
}
.btn-option-frutiger:hover::before { left: 100%; }
.btn-option-frutiger:hover {
    background: linear-gradient(135deg, rgba(6,137,228,0.25) 0%, rgba(113,171,35,0.12) 100%);
    border-color: rgba(6, 137, 228, 0.6);
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 8px 24px rgba(6, 137, 228, 0.25);
}

/* ============================================================
   PERFORMANCE LAYER — GPU compositing per elementi animati
   ============================================================ */
.category-bubble,
.bg-orb,
.loading-orb-core,
.loading-ring,
.splash-icon,
.glass-panel,
.btn-primary,
.btn-option-frutiger {
    will-change: transform;
    transform: translateZ(0); /* promuovi su compositor layer */
}

.glass-panel,
.result-side-col,
#engine-quiz,
#engine-result,
#engine-loading {
    contain: layout style; /* evita reflow a cascata */
}

/* ============================================================
   --vh FIX: sostituisce 100vh ovunque (mobile browser bug)
   Settato da JS con ResizeObserver
   ============================================================ */
.splash-screen,
#engine-loading {
    min-height: calc(var(--vh, 1vh) * 100);
}

/* ============================================================
   MOBILE-FIRST — html.is-mobile
   Tutto ciò che segue è attivo SOLO quando JS ha rilevato mobile
   ============================================================ */

/* Header mobile: compatto e sticky */
html.is-mobile .app-header {
    padding: 10px 14px;
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

html.is-mobile .header-controls {
    gap: 6px;
}

html.is-mobile .header-controls button {
    font-size: 11px;
    padding: 6px 10px;
}

/* Homepage: griglia categorie più grande e tap-friendly */
html.is-mobile .category-bubble-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
}

html.is-mobile .category-bubble {
    min-height: 90px;
    border-radius: 20px;
    font-size: 11px;
}

html.is-mobile .master-bubble {
    width: 150px;
    height: 150px;
}

html.is-mobile .master-bubble .bubble-icon {
    font-size: 42px;
}

html.is-mobile .master-bubble .bubble-title {
    font-size: 13px;
}

html.is-mobile .category-bubble .bubble-icon {
    font-size: 28px;
}

/* Category tabs: scrollabili orizzontalmente */
html.is-mobile #category-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 8px;
    padding-bottom: 6px;
    scrollbar-width: none;
}
html.is-mobile #category-tabs::-webkit-scrollbar { display: none; }
html.is-mobile #category-tabs .tab-btn {
    scroll-snap-align: start;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Quiz: fullscreen-feel su mobile */
html.is-mobile #engine-quiz {
    padding: 24px 16px !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

html.is-mobile #question-text {
    font-size: 22px !important;
    line-height: 1.35 !important;
}

html.is-mobile #alternatives-container button,
html.is-mobile #alternatives-container .btn-option-frutiger {
    min-height: 54px; /* Apple HIG: 44px minimo, 54px comodo */
    font-size: 15px;
    border-radius: 16px;
    padding: 14px 18px;
    /* Feedback visivo tap immediato */
    -webkit-tap-highlight-color: rgba(6, 137, 228, 0.15);
}

html.is-mobile #alternatives-container button:active {
    transform: scale(0.97);
    background: rgba(6, 137, 228, 0.2);
    transition: transform 0.08s ease, background 0.08s ease;
}

/* Slider quiz mobile: più grosso, più facile */
html.is-mobile input[type="range"] {
    height: 6px;
    -webkit-appearance: none;
}
html.is-mobile input[type="range"]::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
    -webkit-appearance: none;
    background: var(--accent-blue-light);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(6,137,228,0.4);
    cursor: pointer;
}

/* Loading: centrato e padding safe-area */
html.is-mobile #engine-loading {
    padding: 24px 20px env(safe-area-inset-bottom) !important;
}

html.is-mobile .loading-matrix {
    font-size: 10px;
    line-height: 1.6;
}

html.is-mobile .loading-energy-bar {
    margin: 20px 0;
}

/* Risultati: stack verticale pulito */
html.is-mobile .result-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

html.is-mobile .result-side-col {
    padding: 20px 16px !important;
    border-radius: 20px !important;
}

html.is-mobile #comparison-table-box {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

html.is-mobile #comparison-table-box table {
    min-width: 460px;
}

/* Pulsante Amazon: full-width e grande su mobile */
html.is-mobile #engine-result .btn-primary {
    width: 100%;
    min-height: 54px;
    font-size: 16px;
    border-radius: 18px;
    margin-bottom: 10px;
}

/* Safe area iPhone (notch / Dynamic Island) */
html.is-ios body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

/* ============================================================
   TOUCH STATES — sostituisce :hover su dispositivi touch
   :hover rimane per desktop, :active cattura i tap
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
    .category-bubble:hover {
        transform: none;
        box-shadow: none;
    }
    .category-bubble:active {
        transform: scale(0.94);
        background: rgba(6, 137, 228, 0.25);
        transition: transform 0.1s ease;
    }

    .btn-primary:hover { transform: none; }
    .btn-primary:active {
        transform: scale(0.97);
        filter: brightness(0.9);
        transition: transform 0.08s ease;
    }

    .option-card:hover { transform: none; box-shadow: none; }
    .option-card:active {
        transform: scale(0.98);
        border-color: var(--accent-green);
        transition: transform 0.1s ease;
    }

    .btn-option-frutiger:hover { transform: none; }
    .btn-option-frutiger::before { display: none; } /* rimuove shimmer inutile su touch */
}

/* ============================================================
   RIDUZIONE ANIMAZIONI — html.reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.1ms !important;
    }

    .bg-orb { animation: none; opacity: 0.03; }
    .loading-ring { animation: none; }
    .loading-orb-core { animation: none; }
    .category-bubble { transition: none; }
}

/* ============================================================
   BREAKPOINT TABLET (768px – 1024px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
    .category-bubble-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    }

    .result-layout {
        grid-template-columns: 1fr 1fr !important;
    }

    .result-side-col:last-child {
        grid-column: 1 / -1;
    }
}

/* ============================================================
   QUIZ REDESIGN v2 — domanda singola a schermo intero
   ============================================================ */

.quiz-screen {
    border-radius: 32px !important;
    padding: 24px 28px 36px !important;
    max-width: 680px;
    margin: 0 auto;
}

.quiz-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

/* "Chiedi al Genio" — la mascotte integrata nella schermata domanda, non solo
   come bolla fluttuante: parla solo se cliccata (mai spontaneamente). */
.genio-help-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(46, 204, 113, 0.08);
    border: 1.5px solid rgba(46, 204, 113, 0.3);
    color: var(--accent-green);
    border-radius: 20px;
    padding: 6px 16px 6px 6px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    white-space: nowrap;
}
.genio-help-btn:hover, .genio-help-btn:active {
    background: rgba(46, 204, 113, 0.16);
    border-color: rgba(46, 204, 113, 0.5);
    transform: translateY(-1px);
}
.genio-help-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid var(--accent-green);
    object-fit: cover;
    background: var(--bg-card);
}

/* Il Genio come azione TERZIARIA sotto le opzioni: disponibile ma discreto,
   non compete come azione primaria (feedback UX: appariva prematuro). */
.quiz-tertiary {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}
.quiz-tertiary .genio-help-btn {
    background: transparent;
    border-color: rgba(255,255,255,0.14);
    color: var(--panna-muted);
    font-size: 12px;
    padding: 5px 14px 5px 5px;
    opacity: 0.8;
}
.quiz-tertiary .genio-help-btn:hover,
.quiz-tertiary .genio-help-btn:active {
    background: rgba(46,204,113,0.10);
    color: var(--accent-green);
    border-color: rgba(46,204,113,0.42);
    opacity: 1;
}
.quiz-tertiary .genio-help-icon { width: 26px; height: 26px; }

#quiz-purpose-note {
    text-align: center;
    font-size: 12px;
    opacity: 0.5;
    max-width: 460px;
    margin: 16px auto 0;
    line-height: 1.4;
}

@media (max-width: 480px) {
    .genio-help-btn span { display: inline; } /* sotto le opzioni c'è spazio */
}

.quiz-back-btn {
    background: rgba(255,255,255,0.05);
    border: 1.5px solid rgba(255,255,255,0.14);
    color: var(--panna-muted);
    border-radius: 20px;
    padding: 8px 16px;
    font-family: var(--font-body);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    white-space: nowrap;
}
.quiz-back-btn:hover, .quiz-back-btn:active {
    background: rgba(255,255,255,0.10);
    color: var(--panna);
    border-color: rgba(255,255,255,0.28);
    transform: translateX(-2px);
}

.quiz-progress-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.quiz-progress-text {
    font-size: 11px;
    color: var(--panna-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.quiz-compat-badge {
    font-size: 22px;
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--accent-green);
    text-shadow: 0 0 14px rgba(113,171,35,0.55);
    min-width: 54px;
    text-align: right;
    flex-shrink: 0;
}

/* Riga di stato dinamica: unica narrativa sopra la domanda (build-trust) */
.quiz-status-text {
    font-size: 13px;
    color: var(--accent-green);
    opacity: 0.8;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-align: center;
    margin: 14px 0 2px;
    min-height: 18px;
    transition: all 0.5s ease;
}

/* ============================================================
   MATCH PERFETTO — barra gaming grande che si carica a ogni risposta:
   quanto ci avviciniamo al prodotto giusto. Solo crescente, non è
   avanzamento del quiz (lunghezza dinamica).
   ============================================================ */
/* Indicatore match COMPATTO nella top bar: piccolo, glow ridotto, non compete
   più con la domanda. Resta crescente/onesto ma discreto. */
.genie-power {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
}
.genie-power-mini-pct {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--panna-muted);
    white-space: nowrap;
}
.genie-power-pct {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    color: #7bed9f;
    text-shadow: 0 0 8px rgba(123, 237, 159, 0.5);
}
.genie-power-track {
    position: relative;
    height: 20px;
    width: 320px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04)),
        rgba(10, 24, 18, 0.72);
    border: 1px solid rgba(123, 237, 159, 0.38);
    box-shadow:
        0 0 18px rgba(46, 213, 115, 0.24),
        inset 0 2px 5px rgba(0, 0, 0, 0.55),
        inset 0 0 12px rgba(123, 237, 159, 0.16);
    overflow: hidden;
}
.genie-power-fill {
    position: relative;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #2ed573, #7bed9f, #17c0eb, #7bed9f, #2ed573);
    background-size: 250% 100%;
    box-shadow:
        0 0 16px rgba(46, 213, 115, 0.78),
        0 0 30px rgba(23, 192, 235, 0.35),
        inset 0 2px 3px rgba(255, 255, 255, 0.62);
    transition: width 0.75s cubic-bezier(0.22, 1, 0.36, 1);
    animation: geniePowerFlow 1.6s linear infinite;
}
@media (max-width: 640px) {
    .genie-power-track { width: min(76vw, 300px); height: 18px; }
}
/* Riflesso lucido che scorre sulla barra carica */
.genie-power-fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.7) 50%, transparent 80%);
    transform: translateX(-100%);
    animation: geniePowerSweep 1.5s ease-in-out infinite;
}
@keyframes geniePowerFlow {
    to { background-position: 250% 0; }
}
@keyframes geniePowerSweep {
    0% { transform: translateX(-100%); }
    55%, 100% { transform: translateX(240%); }
}
/* Colpo di carica a ogni risposta: la barra "pompa" energia */
.genie-power-charge .genie-power-track {
    animation: geniePowerPump 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.genie-power-charge .genie-power-fill {
    animation: geniePowerFlow 1.6s linear infinite, geniePowerFlash 0.5s ease-out;
}
@keyframes geniePowerPump {
    0%   { transform: scaleY(1); }
    35%  { transform: scaleY(1.45); box-shadow: 0 0 34px rgba(46, 213, 115, 0.78), 0 0 48px rgba(23, 192, 235, 0.42); }
    100% { transform: scaleY(1); }
}
@keyframes geniePowerFlash {
    0%   { filter: brightness(2.2) saturate(1.4); }
    100% { filter: brightness(1) saturate(1); }
}
@media (prefers-reduced-motion: reduce) {
    .genie-power-fill,
    .genie-power-fill::after,
    .genie-power-charge .genie-power-track,
    .genie-power-charge .genie-power-fill {
        animation: none;
    }
    .genie-power-fill { transition: width 0.3s ease; }
}

#energy-pellets-container {
    display: flex;
    gap: 7px !important;
    margin-top: 12px !important;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    filter: drop-shadow(0 0 8px rgba(46, 213, 115, 0.18));
}
.energy-pellet {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.52), rgba(255,255,255,0.16) 28%, rgba(255,255,255,0.08) 58%, rgba(0,0,0,0.28) 100%);
    border: 1px solid rgba(255,255,255,0.22);
    box-shadow:
        0 0 9px rgba(255, 255, 255, 0.12),
        inset 0 2px 4px rgba(255,255,255,0.18),
        inset 0 -2px 4px rgba(0,0,0,0.42);
    transition: transform 0.28s ease, background 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
    flex: 0 0 auto;
}
.energy-pellet.active {
    background:
        radial-gradient(circle at 34% 28%, #ffffff 0%, #b7ffd0 20%, #7bed9f 45%, #2ed573 72%, #0aa34a 100%);
    border-color: rgba(183, 255, 208, 0.95);
    box-shadow:
        0 0 14px rgba(46, 213, 115, 0.95),
        0 0 26px rgba(123, 237, 159, 0.58),
        inset 0 2px 4px rgba(255,255,255,0.72),
        inset 0 -2px 4px rgba(0,0,0,0.22);
    transform: scale(1.28);
}
@media (max-width: 480px) {
    #energy-pellets-container { gap: 5px !important; margin-top: 10px !important; }
    .energy-pellet { width: 13px; height: 13px; }
}

/* Domanda — ELEMENTO DOMINANTE della schermata: grande, tanta aria attorno */
.question-text {
    font-size: 38px !important;
    font-weight: 800 !important;
    line-height: 1.22 !important;
    color: var(--panna) !important;
    text-align: center !important;
    margin: 22px auto 40px !important;
    max-width: 600px;
    font-style: normal !important;
    letter-spacing: -0.3px;
}
@media (max-width: 640px) {
    .question-text { font-size: 30px !important; line-height: 1.3 !important; margin: 16px auto 32px !important; }
}
@media (max-width: 400px) {
    .question-text { font-size: 25px !important; }
}

/* Quiz option cards — Frutiger Aero glass, grandi e tappabili */
.quiz-option-card {
    background: radial-gradient(ellipse at 28% 18%, rgba(255,255,255,0.17) 0%, rgba(6,137,228,0.07) 55%, rgba(0,0,0,0.18) 100%);
    border: 1.5px solid rgba(255,255,255,0.17);
    border-top-color: rgba(255,255,255,0.32);
    border-radius: 18px;
    padding: 18px 22px;
    cursor: pointer;
    color: var(--panna);
    text-align: left;
    transition: all 0.22s cubic-bezier(0.34,1.56,0.64,1);
    box-shadow:
        inset 0 2px 6px rgba(255,255,255,0.20),
        inset 0 -2px 5px rgba(0,0,0,0.25),
        0 5px 16px rgba(0,0,0,0.22);
    position: relative;
    overflow: hidden;
    min-height: 56px;
    display: flex;
    align-items: center;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.quiz-option-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 48%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.09), transparent);
    border-radius: 18px 18px 0 0;
    pointer-events: none;
}
.quiz-option-card:hover {
    background: radial-gradient(ellipse at 28% 18%, rgba(255,255,255,0.34) 0%, rgba(113,171,35,0.20) 55%, rgba(0,0,0,0.16) 100%);
    border-color: rgba(113,171,35,0.85);
    border-top-color: rgba(255,255,255,0.5);
    transform: translateY(-4px) scale(1.02);
    box-shadow:
        inset 0 2px 10px rgba(255,255,255,0.34),
        inset 0 -2px 8px rgba(113,171,35,0.20),
        0 14px 38px rgba(113,171,35,0.32),
        0 0 0 1px rgba(113,171,35,0.35);
}
.quiz-option-card.quiz-option-pressing,
.quiz-option-card:active {
    transform: scale(0.97) !important;
    transition: transform 0.07s ease !important;
    border-color: rgba(113,171,35,0.7);
}
/* Stato SELEZIONATO — deciso e inequivocabile: la scelta è una decisione */
.quiz-option-card.selected {
    background: radial-gradient(ellipse at 28% 18%, rgba(46,213,115,0.30) 0%, rgba(113,171,35,0.24) 60%, rgba(0,0,0,0.14) 100%);
    border-color: var(--accent-green);
    border-width: 2px;
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        inset 0 2px 10px rgba(255,255,255,0.30),
        0 10px 30px rgba(46,213,115,0.40),
        0 0 0 2px rgba(46,213,115,0.55);
    padding-right: 52px; /* spazio per il check */
}
.quiz-option-card.selected::after {
    content: '✓';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent-green);
    color: #06331a;
    font-size: 15px;
    font-weight: 900;
    box-shadow: 0 0 14px rgba(46,213,115,0.8);
    z-index: 2;
    animation: optionCheckPop 0.32s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes optionCheckPop {
    0% { transform: translateY(-50%) scale(0); }
    100% { transform: translateY(-50%) scale(1); }
}
/* Le opzioni NON scelte si attenuano: la scelta risalta ancora di più */
.quiz-option-card.dimmed {
    opacity: 0.4;
    filter: saturate(0.6);
    transform: scale(0.985);
}
.quiz-option-text {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    position: relative;
    z-index: 1;
}
@media (max-width: 480px) {
    .quiz-option-card { padding: 16px 18px; min-height: 54px; }
    .quiz-option-text { font-size: 14px; }
}

.question-feedback {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-green);
    min-height: 22px;
    margin-top: 18px;
    text-align: center;
    transition: opacity 0.3s ease;
}

.btn-explain {
    background: transparent;
    border: 1px dashed rgba(234,230,202,0.14);
    color: var(--panna-muted);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 12px;
    cursor: pointer;
    margin-top: 16px;
    font-family: var(--font-body);
    transition: all 0.2s ease;
}
.btn-explain:hover { border-color: var(--accent-green); color: var(--panna); }

.question-explanation {
    font-size: 12px;
    color: var(--panna-muted);
    margin-top: 12px;
    font-style: italic;
    line-height: 1.5;
    max-width: 500px;
    background: rgba(255,255,255,0.02);
    padding: 10px 16px;
    border-radius: 14px;
    border: 1px dashed var(--border-color);
}

/* ============================================================
   VERDICT CARD — schermata transizione prima dei risultati
   ============================================================ */
.verdict-screen {
    max-width: 520px;
    margin: 0 auto;
    padding: 60px 40px !important;
    border-radius: 40px !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    border-top-color: rgba(255,255,255,0.35) !important;
}

.verdict-orb {
    font-size: 70px;
    margin-bottom: 22px;
    animation: verdictPop 0.55s cubic-bezier(0.34,1.56,0.64,1) both;
    display: block;
}

.verdict-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--panna);
    margin-bottom: 12px;
    font-family: var(--font-heading);
}

.verdict-text {
    font-size: 15px;
    color: var(--panna-muted);
    line-height: 1.65;
    max-width: 360px;
    margin: 0 auto 26px;
}

.verdict-stars {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 22px;
}

.verdict-star {
    font-size: 30px;
    opacity: 0;
    transform: scale(0) rotate(-25deg);
    animation: starPop 0.38s cubic-bezier(0.34,1.56,0.64,1) forwards;
    color: var(--accent-yellow, #fbb905);
    filter: drop-shadow(0 0 7px rgba(251,185,5,0.5));
    display: inline-block;
}
.verdict-star:not(.active) {
    color: rgba(234,230,202,0.18);
    filter: none;
    animation-delay: 0s !important;
}

.verdict-cta {
    font-size: 13px;
    color: var(--panna-muted);
    font-style: italic;
    animation: pulse 1.6s ease-in-out infinite;
    margin: 0;
}

@keyframes verdictPop {
    0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
    70%  { transform: scale(1.18) rotate(6deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes starPop {
    0%   { opacity: 0; transform: scale(0) rotate(-25deg); }
    70%  { transform: scale(1.32) rotate(6deg); opacity: 1; }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ============================================================
   FRUTIGER AERO UPGRADE — orbs, glass, brillantezza
   ============================================================ */

/* Background orbs: più vividi e colorati */
.bg-orb {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
    filter: blur(70px);
    opacity: 1;
}
.bg-orb-1 {
    width: 650px; height: 650px;
    top: -12%; left: -18%;
    background: radial-gradient(circle, rgba(6,137,228,0.26) 0%, rgba(0,50,219,0.10) 55%, transparent 78%);
    animation: orbDrift1 20s ease-in-out infinite alternate;
}
.bg-orb-2 {
    width: 550px; height: 550px;
    bottom: -8%; right: -12%;
    background: radial-gradient(circle, rgba(113,171,35,0.22) 0%, rgba(46,204,113,0.07) 55%, transparent 78%);
    animation: orbDrift2 25s ease-in-out infinite alternate;
}
.bg-orb-3 {
    width: 420px; height: 420px;
    top: 38%; left: 48%;
    background: radial-gradient(circle, rgba(0,195,210,0.14) 0%, rgba(6,137,228,0.05) 55%, transparent 78%);
    animation: orbDrift3 17s ease-in-out infinite alternate;
}
@keyframes orbDrift1 { 0% { transform: translate(0,0); } 100% { transform: translate(48px, 65px); } }
@keyframes orbDrift2 { 0% { transform: translate(0,0); } 100% { transform: translate(-55px, -45px); } }
@keyframes orbDrift3 { 0% { transform: translate(-50%,-50%) scale(1); } 100% { transform: translate(-58%,-44%) scale(1.18); } }

/* Glass panels: bordo superiore più brillante, inset highlight più forte */
.glass-panel {
    border-top-color: rgba(255,255,255,0.38) !important;
    border-left-color: rgba(255,255,255,0.22) !important;
    box-shadow:
        inset 0 2px 8px rgba(255,255,255,0.18),
        inset 0 -2px 8px rgba(0,0,30,0.25),
        0 22px 55px rgba(0,0,0,0.42) !important;
}

/* ============================================================
   HEADER RESPONSIVE — evita che il sottotitolo vada a capo su 3 righe
   e spinga i bottoni fuori schermo nelle larghezze intermedie (tablet)
   ============================================================ */
@media (max-width: 1024px) {
    .app-header { flex-wrap: wrap; row-gap: 8px; }
    .header-subtitle { display: none !important; }
}

/* ============================================================
   MOBILE HEADER COMPACT
   ============================================================ */
@media (max-width: 600px) {
    .app-header {
        padding: 14px 16px !important;
        flex-wrap: wrap;
        gap: 10px;
    }
    .header-logo { font-size: 18px !important; gap: 6px !important; }
    .header-logo svg { width: 24px !important; height: 24px !important; }
    .header-subtitle { display: none !important; }
    .header-controls { gap: 6px !important; flex-wrap: wrap; }
    .btn-bubble {
        padding: 7px 10px !important;
        font-size: 11px !important;
        border-radius: 14px !important;
    }
    /* Su schermi stretti, audio/suggerisci/reset stanno dietro "⋯" per non
       affollare l'header sopra la piega: restano un tap di distanza. */
    #header-menu-toggle { display: inline-flex !important; }
    .header-extra-controls {
        display: none;
        width: 100%;
        justify-content: flex-end;
        gap: 6px;
        margin-top: 8px;
    }
    .header-extra-controls.open { display: flex; }
    .quiz-screen { padding: 18px 16px 28px !important; }
    .verdict-screen { padding: 40px 24px !important; min-height: 320px; }
    .verdict-orb { font-size: 54px; }
    .verdict-title { font-size: 22px; }
}

/* ============================================================
   MICRO-OTTIMIZZAZIONI SCROLLING
   ============================================================ */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%; /* previene zoom testo automatico iOS */
}

body {
    -webkit-overflow-scrolling: touch;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    overscroll-behavior-y: none;
}

input, textarea {
    -webkit-user-select: auto;
    user-select: auto;
}

/* Seleziona testo disabilitato su elementi interattivi */
.category-bubble,
.btn-primary,
.btn-secondary,
.btn-option-frutiger,
#alternatives-container button {
    user-select: none;
    -webkit-user-select: none;
}

/* ============================================================
   LOADING — SCARICHE ELETTRICHE & EFFETTI DI CARICA
   ============================================================ */
.loading-body { position: relative; }

.loading-electric {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 5;
    opacity: 0;
}
/* Flash globale alla scossa */
.loading-electric.zap-active {
    animation: electric-flash 0.45s ease-out;
}
@keyframes electric-flash {
    0%   { opacity: 0; }
    8%   { opacity: 1; background: radial-gradient(circle at 50% 40%, rgba(120,200,255,0.28), transparent 60%); }
    18%  { opacity: 0.4; }
    30%  { opacity: 0.9; background: radial-gradient(circle at 50% 40%, rgba(160,220,255,0.22), transparent 65%); }
    100% { opacity: 0; background: transparent; }
}

/* Fulmini ⚡ che guizzano in posizioni diverse */
.loading-electric .bolt {
    position: absolute;
    font-size: 30px;
    opacity: 0;
    filter: drop-shadow(0 0 8px #6cc6ff) drop-shadow(0 0 16px #2a9cff);
    transform: scale(0.5) rotate(0deg);
}
.zap-active .bolt-1 { top: 12%;  left: 18%; animation: bolt-pop 0.4s ease-out 0.02s; }
.zap-active .bolt-2 { top: 26%;  right: 14%; animation: bolt-pop 0.4s ease-out 0.10s; }
.zap-active .bolt-3 { bottom: 22%; left: 28%; animation: bolt-pop 0.4s ease-out 0.06s; }
@keyframes bolt-pop {
    0%   { opacity: 0; transform: scale(0.4) rotate(-18deg); }
    25%  { opacity: 1; transform: scale(1.25) rotate(8deg); }
    60%  { opacity: 0.7; transform: scale(1) rotate(-4deg); }
    100% { opacity: 0; transform: scale(0.8) rotate(0deg); }
}

/* Scintille che schizzano via */
.loading-electric .spark {
    position: absolute;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #bfe6ff;
    box-shadow: 0 0 8px 2px rgba(120,200,255,0.9);
    opacity: 0;
    top: 42%; left: 50%;
}
.zap-active .spark-1 { animation: spark-fly 0.5s ease-out 0.02s; --sx: -70px; --sy: -40px; }
.zap-active .spark-2 { animation: spark-fly 0.5s ease-out 0.08s; --sx:  80px; --sy: -30px; }
.zap-active .spark-3 { animation: spark-fly 0.5s ease-out 0.05s; --sx: -50px; --sy:  55px; }
.zap-active .spark-4 { animation: spark-fly 0.5s ease-out 0.11s; --sx:  60px; --sy:  50px; }
@keyframes spark-fly {
    0%   { opacity: 0; transform: translate(0,0) scale(1.4); }
    20%  { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--sx,40px), var(--sy,-40px)) scale(0.2); }
}

/* Orb che "si carica" al momento della scossa */
.loading-orb.orb-charged {
    animation: orb-charge 0.26s ease-out;
}
@keyframes orb-charge {
    0%   { filter: brightness(1); transform: scale(1); }
    40%  { filter: brightness(1.8) drop-shadow(0 0 22px #6cc6ff); transform: scale(1.08); }
    100% { filter: brightness(1); transform: scale(1); }
}

/* Rispetta chi preferisce meno animazioni */
@media (prefers-reduced-motion: reduce) {
    .loading-electric, .loading-orb.orb-charged { animation: none !important; }
    .loading-electric .bolt, .loading-electric .spark { animation: none !important; opacity: 0 !important; }
}

/* ============================================================
   LOADING — CHECKLIST ANALISI (tante operazioni che si completano)
   ============================================================ */
.loading-checklist {
    margin: 16px auto 4px;
    max-width: 460px;
    max-height: 150px;
    overflow: hidden;
    text-align: left;
    padding: 10px 14px;
    border-radius: 16px;
    background: rgba(6, 137, 228, 0.06);
    border: 1px solid rgba(6, 137, 228, 0.18);
    font-family: var(--font-mono, monospace);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 100%);
}
.cl-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    line-height: 1.5;
    padding: 2px 0;
    animation: cl-in 0.35s ease-out;
}
@keyframes cl-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cl-item .cl-icon {
    flex-shrink: 0;
    width: 16px;
    text-align: center;
    font-weight: 700;
}
.cl-item.running .cl-icon {
    color: var(--accent-blue, #0689e4);
    display: inline-block;
    animation: cl-spin 0.9s linear infinite;
}
.cl-item.running .cl-text { color: var(--panna, #eae6ca); }
.cl-item.done .cl-icon { color: var(--accent-green, #71ab23); animation: none; }
.cl-item.done .cl-text { color: rgba(234, 230, 202, 0.55); }
@keyframes cl-spin { to { transform: rotate(360deg); } }

@media (max-width: 768px) {
    .loading-checklist { max-width: 92%; max-height: 120px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .cl-item.running .cl-icon { animation: none; }
}

/* ============================================================
   CTA AMAZON PROMINENTE (in cima ai risultati)
   ============================================================ */
.amazon-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    background: linear-gradient(135deg, rgba(255, 153, 0, 0.14), rgba(46, 204, 113, 0.10));
    border: 2px solid #FF9900;
    border-radius: 28px;
    padding: 18px 22px;
    margin: 0 auto 30px;
    max-width: 640px;
    box-shadow: 0 8px 30px rgba(255, 153, 0, 0.18), 0 0 0 4px rgba(255, 153, 0, 0.06);
    animation: amazonHeroPulse 2.6s ease-in-out infinite;
}
@keyframes amazonHeroPulse {
    0%, 100% { box-shadow: 0 8px 30px rgba(255, 153, 0, 0.18), 0 0 0 0 rgba(255, 153, 0, 0.18); }
    50%      { box-shadow: 0 8px 34px rgba(255, 153, 0, 0.30), 0 0 0 8px rgba(255, 153, 0, 0); }
}

.amazon-circle {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 3px solid #FF9900;
}

.amazon-hero-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
    text-align: left;
}
.amazon-hero-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent-green);
    font-weight: 800;
}
.amazon-hero-name {
    font-size: 17px;
    font-weight: 800;
    color: var(--panna);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.amazon-hero-price {
    font-size: 18px;
    font-weight: 800;
    color: #FF9900;
}

.amazon-hero-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.amazon-hero-btn {
    background: linear-gradient(135deg, #FF9900, #f1c40f);
    color: #131A22;
    font-weight: 800;
    font-size: 15px;
    padding: 14px 26px;
    border-radius: 30px;
    border: none;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(255, 153, 0, 0.4);
    transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.amazon-hero-btn:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 6px 22px rgba(255, 153, 0, 0.55);
}
.amazon-hero-btn.btn-locked,
.amazon-hero-btn:disabled {
    filter: grayscale(0.4);
}
.amazon-hero-timer {
    font-size: 10px;
    color: var(--panna-muted);
}

@media (max-width: 768px) {
    .amazon-hero { flex-direction: column; text-align: center; gap: 12px; padding: 18px; }
    .amazon-hero-info { text-align: center; align-items: center; }
    .amazon-hero-name { white-space: normal; }
    .amazon-hero-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .amazon-hero { animation: none; }
}

/* ============================================================
   FIX MOBILE — overflow, header responsive, spazio per la mascotte
   ============================================================ */
/* U1: niente scroll orizzontale, mai */
body { overflow-x: hidden; max-width: 100%; }
*, *::before, *::after { box-sizing: border-box; }

@media (max-width: 768px) {
    /* U1: il titolo grande della home non sfora più */
    #engine-start .logo-container h1 {
        font-size: 21px !important;
        letter-spacing: 0.5px !important;
        word-break: break-word;
    }
    #engine-start { padding-left: 16px !important; padding-right: 16px !important; }

    /* U2: header che va a capo in modo ordinato su mobile */
    .app-header {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        padding: 10px 12px;
    }
    .header-subtitle { display: none !important; }   /* sottotitolo: via su mobile */
    .header-controls {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        width: 100%;
    }
    .header-controls .btn {
        font-size: 11px;
        padding: 7px 12px;
        margin-right: 0 !important;
    }

    /* U5: spazio in fondo così la mascotte fluttuante non copre l'ultimo bottone */
    .app-container { padding-bottom: 120px; }
    .mascot-bubble { max-width: 200px; }
}

/* ============================================================
   ACCESSIBILITÀ — focus visibile da tastiera
   Le card-opzione del quiz sono div[role=button][tabindex=0]: senza uno
   stato di focus visibile, chi naviga con Tab non sa dove si trova.
   :focus-visible scatta solo col focus da tastiera (nessun anello dopo
   un click col mouse). L'outline segue il border-radius dell'elemento.
   ============================================================ */
.quiz-option-card:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 3px solid var(--accent-blue, #0689e4);
    outline-offset: 2px;
}

/* Rispetto per chi ha ridotto le animazioni a livello di sistema:
   niente transizioni/animazioni lunghe (il sito ne è pieno, per gli altri). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Fix text formatting in results */
#engine-result, .result-center-col { word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; max-width: 100%; overflow-x: hidden; }

/* ============================================================ */
/* PREMIUM QUIZ DYNAMIC LAYOUTS */
/* ============================================================ */

/* Base container styling */
.quiz-options-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* Layout Dual: 2 options side-by-side (like Tinder/Dual-choice) */
.quiz-options-container.layout-dual {
    flex-direction: row;
    justify-content: center;
}
.quiz-options-container.layout-dual .option-card {
    flex: 1;
    min-height: 140px;
    padding: 30px 20px;
}
.quiz-options-container.layout-dual .option-icon {
    font-size: 56px;
}

/* Layout Grid 2x2: 4 options in a compact grid */
.quiz-options-container.layout-grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.quiz-options-container.layout-grid-2x2 .option-card {
    min-height: 120px;
    padding: 20px 15px;
}

/* Mobile overrides for layout dual/grid */
@media (max-width: 600px) {
    .quiz-options-container.layout-dual {
        flex-direction: column;
    }
    .quiz-options-container.layout-dual .option-card {
        min-height: 100px;
        padding: 20px;
    }
    .quiz-options-container.layout-dual .option-icon {
        font-size: 42px;
    }
}

@media (max-width: 480px) {
    #suggestion-modal > div, #profile-memory-modal > div {
        width: 95% !important;
        padding: 20px !important;
    }
}

/* ============================================================
   UX final polish - compact app-first layout and readable controls
   ============================================================ */
.app-header {
    padding: 16px 32px;
    min-height: 72px;
}

.header-logo {
    letter-spacing: 0;
}

.header-controls .btn-bubble {
    min-width: 48px;
    min-height: 44px;
    border-radius: 22px;
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

#engine-start {
    max-width: 1040px !important;
    margin: 8px auto 24px !important;
    padding: 30px 28px !important;
    border-radius: 28px !important;
}

#engine-start .logo-container {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
}

#engine-start .hero-logo-symbol {
    width: 118px !important;
    height: 118px !important;
    margin-bottom: 14px !important;
}

#engine-start .hero-mascot {
    width: 92px !important;
    height: 92px !important;
}

#engine-start h1 {
    font-size: clamp(28px, 4vw, 42px) !important;
    letter-spacing: 1px !important;
}

.intent-door {
    border-radius: 24px !important;
    min-height: 168px !important;
}

#engine-result {
    border-radius: 28px !important;
    padding: 30px !important;
}

.amazon-hero,
.why-for-you-badge,
.product-3d-card,
.alternative-card {
    border-radius: 22px !important;
}

@media (max-width: 640px) {
    .app-header {
        padding: 8px 12px !important;
        min-height: 58px;
    }

    .header-logo {
        font-size: 20px !important;
        gap: 7px !important;
    }

    #header-logo-img {
        width: 38px !important;
        height: 38px !important;
    }

    .header-subtitle,
    html.is-mobile .header-subtitle {
        display: none !important;
    }

    #header-menu-toggle {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        font-size: 18px !important;
    }

    #engine-start {
        margin: 8px 10px 18px !important;
        padding: 20px 16px 22px !important;
        border-radius: 22px !important;
    }

    #engine-start .hero-logo-symbol {
        width: 92px !important;
        height: 92px !important;
        margin-bottom: 10px !important;
    }

    #engine-start .hero-mascot {
        width: 72px !important;
        height: 72px !important;
    }

    #engine-start h1 {
        font-size: 24px !important;
        line-height: 1.05 !important;
    }

    #engine-start .logo-container > div[style*="letter-spacing"] {
        font-size: 10px !important;
        letter-spacing: 4px !important;
        line-height: 1.35 !important;
    }

    #engine-start h2 {
        font-size: 22px !important;
        line-height: 1.2 !important;
    }

    .intent-subtitle {
        font-size: 15px !important;
        line-height: 1.45 !important;
        margin-bottom: 14px !important;
    }

    .intent-door {
        min-height: 128px !important;
        padding: 18px 16px !important;
        border-radius: 20px !important;
    }
}

/* ============================================================
   UX premium pass - result screen and app-like proportions
   ============================================================ */
#engine-result {
    max-width: 1040px !important;
    width: min(1040px, calc(100vw - 32px)) !important;
    padding: 28px !important;
    border-radius: 24px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.035)),
        rgba(11, 15, 22, 0.86) !important;
    border-color: rgba(234, 230, 202, 0.16) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,0.34) !important;
}

#engine-result .result-header { margin-bottom: 22px !important; }
#engine-result .result-header h2 {
    color: var(--panna) !important;
    font-size: clamp(24px, 3vw, 34px) !important;
    letter-spacing: 0 !important;
}
#result-custom-header {
    max-width: 720px;
    margin-left: auto !important;
    margin-right: auto !important;
    color: rgba(234, 230, 202, 0.82) !important;
}

.amazon-hero {
    max-width: 900px !important;
    align-items: stretch !important;
    padding: 18px !important;
    border: 1px solid rgba(255, 153, 0, 0.42) !important;
    background: linear-gradient(135deg, rgba(255, 153, 0, 0.13), rgba(113, 171, 35, 0.10)) !important;
    box-shadow: 0 16px 42px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.08) !important;
    animation: none !important;
}
.amazon-circle { width: 62px !important; height: 62px !important; border-width: 2px !important; }
.amazon-hero-action { justify-content: center !important; }
.amazon-hero-btn {
    min-height: 48px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    border-radius: 14px !important;
    transform: none !important;
}
.amazon-hero-btn:hover:not(:disabled) { transform: translateY(-1px) !important; }

.why-for-you-badge,
#sources-notice-box,
.product-3d-card,
.financial-transparency-box {
    max-width: 900px;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 18px !important;
}
.why-for-you-badge {
    padding: 18px 20px !important;
    margin-bottom: 22px !important;
    background: rgba(113, 171, 35, 0.08) !important;
}
#sources-notice-box { padding: 16px 18px !important; margin-bottom: 22px !important; }
.product-3d-card {
    padding: 26px !important;
    background: rgba(255,255,255,0.035) !important;
    border: 1px solid rgba(234, 230, 202, 0.12) !important;
}
#product-name { max-width: 760px; line-height: 1.15 !important; letter-spacing: 0 !important; }
#product-price,
#amazon-hero-price,
#alt-reasoned-price,
#alt-wild-price { font-variant-numeric: tabular-nums; }
.alternative-card {
    gap: 18px;
    border-radius: 16px !important;
    border: 1px solid rgba(234, 230, 202, 0.10) !important;
    background: rgba(255,255,255,0.035) !important;
}
.alternative-card:hover { border-color: rgba(234, 230, 202, 0.22) !important; }
.result-actions { max-width: 900px; margin-left: auto !important; margin-right: auto !important; }
.quiz-option-card[role="checkbox"] {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.quiz-option-card[aria-checked="true"] {
    box-shadow: 0 0 0 1px rgba(113, 171, 35, 0.5), 0 10px 26px rgba(0,0,0,0.18);
}

@media (max-width: 760px) {
    #engine-result {
        width: calc(100vw - 20px) !important;
        padding: 18px 14px !important;
        margin-top: 12px !important;
        border-radius: 20px !important;
    }
    .amazon-hero { align-items: center !important; padding: 16px !important; }
    .amazon-hero-btn,
    .amazon-hero-action { width: 100% !important; }
    .why-for-you-badge,
    #sources-notice-box,
    .product-3d-card,
    .financial-transparency-box { border-radius: 16px !important; }
    .product-3d-card { padding: 18px 14px !important; }
    .alternative-card { flex-direction: column !important; align-items: flex-start !important; }
    .alternative-card > div:last-child { text-align: left !important; min-width: 0 !important; }
}

@media (max-width: 640px) {
    .app-container {
        padding-top: 6px !important;
    }

    #engine-start {
        margin-top: 4px !important;
        padding-top: 14px !important;
        padding-bottom: 16px !important;
    }

    #engine-start .logo-container {
        margin-bottom: 10px !important;
    }

    #engine-start .hero-logo-symbol {
        width: 72px !important;
        height: 72px !important;
        margin-bottom: 6px !important;
    }

    #engine-start .hero-mascot {
        width: 56px !important;
        height: 56px !important;
    }

    #engine-start h1 {
        font-size: 22px !important;
    }

    #engine-start h2 {
        font-size: 19px !important;
        margin-bottom: 4px !important;
    }

    .intent-subtitle {
        font-size: 13px !important;
        margin-bottom: 8px !important;
    }

    .intent-door {
        min-height: 104px !important;
        padding: 14px 14px !important;
    }
}

@media (max-width: 430px) {
    #engine-start .hero-logo-symbol {
        width: 58px !important;
        height: 58px !important;
    }

    #engine-start .hero-mascot {
        width: 44px !important;
        height: 44px !important;
    }

    #engine-start .logo-container > div[style*="letter-spacing"] {
        display: none !important;
    }

    .intent-door {
        min-height: 92px !important;
        padding: 12px !important;
    }
}

/* Result CTA layout fix: keep the Amazon panel balanced on desktop. */
@media (min-width: 761px) {
    .amazon-hero {
        display: grid !important;
        grid-template-columns: 72px minmax(260px, 1fr) minmax(250px, 320px) !important;
        align-items: center !important;
        overflow: hidden !important;
    }

    .amazon-hero-info {
        min-width: 0 !important;
        width: auto !important;
    }

    .amazon-hero-action {
        width: 100% !important;
        min-width: 0 !important;
        align-items: stretch !important;
    }

    .amazon-hero-action > div {
        text-align: center !important;
    }
}

.result-insight-panel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0 24px;
}
.result-insight-pill {
    border: 1px solid rgba(113, 171, 35, 0.28);
    background: rgba(8, 18, 20, 0.48);
    border-radius: 14px;
    padding: 10px 12px;
    min-height: 58px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 24px rgba(0,0,0,0.18);
}
.result-insight-pill strong {
    display: block;
    color: var(--accent-green);
    font-family: var(--font-heading);
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.result-insight-pill span {
    display: block;
    color: var(--panna);
    font-size: 12px;
    line-height: 1.25;
}

.bounty-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.bounty-btn {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 215, 0, 0.35);
    background: rgba(255, 215, 0, 0.12);
    color: var(--panna);
    text-decoration: none;
    text-align: left;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.bounty-btn strong {
    color: #ffd45a;
    font-size: 14px;
}

.bounty-btn span {
    color: var(--panna-muted);
    font-size: 12px;
    line-height: 1.35;
}

.bounty-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 215, 0, 0.65);
}

.loading-stay-note {
    margin: 8px auto 0;
    max-width: 520px;
    color: #ffd45a;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
}

@media (max-width: 640px) {
    .bounty-actions {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 720px) {
    .result-insight-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.loading-depth-ribbon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: -8px auto 18px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(113, 171, 35, 0.28);
    background: linear-gradient(90deg, rgba(6,137,228,0.12), rgba(113,171,35,0.1));
    color: rgba(234,230,202,0.82);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 0 22px rgba(113,171,35,0.12), inset 0 1px 0 rgba(255,255,255,0.08);
}
.loading-matrix {
    position: relative;
    overflow: hidden;
}
.loading-matrix::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -35%;
    height: 32%;
    background: linear-gradient(180deg, transparent, rgba(113,171,35,0.13), transparent);
    animation: matrixScan 2.8s linear infinite;
    pointer-events: none;
}
@keyframes matrixScan {
    from { transform: translateY(-120%); }
    to { transform: translateY(520%); }
}
.loading-energy-bar {
    height: 12px !important;
    border: 1px solid rgba(113,171,35,0.24);
    box-shadow: 0 0 18px rgba(6,137,228,0.22), inset 0 0 14px rgba(0,0,0,0.45);
}
.loading-energy-fill {
    background: linear-gradient(90deg, #0689e4 0%, #3be07f 58%, #f0d65a 100%) !important;
    box-shadow: 0 0 18px rgba(113,171,35,0.55);
}

/* Modern GenioBox home rebuild */
.home-shell {
    width: min(1120px, calc(100vw - 32px));
    margin: 10px auto 40px;
    padding: clamp(22px, 4vw, 44px);
    border: 1px solid rgba(234,230,202,0.14);
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(6,137,228,0.16), rgba(2,11,24,0.78) 42%, rgba(113,171,35,0.12)),
        rgba(2,11,24,0.72);
    box-shadow: 0 26px 80px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
}
.home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(330px, 0.8fr);
    gap: clamp(22px, 4vw, 48px);
    align-items: stretch;
}
.home-brand-block,
.home-intent-panel,
.home-workbench,
.home-search-panel,
.home-ready-panel {
    min-width: 0;
}
.home-tour-btn {
    float: right;
    border: 1px solid rgba(234,230,202,0.18);
    background: rgba(255,255,255,0.04);
    color: var(--panna);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}
.home-logo-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}
.home-logo-row .hero-logo-symbol {
    width: 86px;
    height: 86px;
    flex: 0 0 auto;
}
.home-logo-row .hero-mascot {
    width: 68px;
    height: 68px;
}
.home-kicker {
    margin: 0 0 6px;
    color: var(--accent-green);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.home-brand-block h1 {
    font-size: clamp(34px, 6vw, 68px);
    line-height: .94;
    letter-spacing: 0;
    text-transform: none;
    color: var(--panna);
}
.home-brand-block h1 span { color: var(--accent-green); }
.home-payoff {
    margin: 0 0 18px;
    color: rgba(234,230,202,0.74);
    font-size: 15px;
    font-weight: 800;
}
.home-brand-block h2 {
    max-width: 780px;
    margin: 0;
    font-size: clamp(28px, 4.4vw, 52px);
    line-height: 1.02;
    letter-spacing: 0;
}
.home-copy {
    max-width: 690px;
    margin: 18px 0 0;
    color: rgba(234,230,202,0.78);
    font-size: clamp(15px, 1.9vw, 18px);
    line-height: 1.55;
}
.home-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}
.home-trust-row span,
.home-panel-head span,
.live-question-head span {
    border: 1px solid rgba(113,171,35,0.28);
    background: rgba(113,171,35,0.09);
    color: rgba(234,230,202,0.86);
    border-radius: 999px;
    padding: 7px 11px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}
.home-intent-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(234,230,202,0.12);
    background: rgba(255,255,255,0.035);
}
.home-panel-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}
.home-panel-head strong {
    color: var(--panna);
    font-size: 15px;
}
.home-intent-panel .intent-doors {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
.intent-door {
    border-radius: 18px !important;
    min-height: 150px;
    text-align: left !important;
    align-items: flex-start !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025)) !important;
}
.intent-door h3 { font-size: 22px; }
.intent-door p { max-width: 30ch; }
.intent-door-go {
    margin-top: auto;
    color: var(--accent-green);
    font-weight: 900;
}
.home-workbench {
    margin-top: 30px;
    padding-top: 28px;
    border-top: 1px solid rgba(234,230,202,0.12);
}
.home-workbench-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    margin-bottom: 18px;
}
.home-workbench-head h2 { font-size: clamp(26px, 3vw, 38px); }
.home-workbench-head p {
    max-width: 440px;
    margin: 0;
    color: var(--panna-muted);
    line-height: 1.45;
}
.home-search-panel {
    max-width: 820px;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(6,137,228,0.28);
    background: rgba(6,137,228,0.08);
}
.home-search-panel label {
    display: block;
    margin-bottom: 10px;
    color: rgba(234,230,202,0.78);
    font-weight: 800;
    font-size: 13px;
}
.home-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}
.home-search-row input {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(234,230,202,0.16);
    background: rgba(0,0,0,0.2);
    color: var(--panna);
    font: inherit;
    outline: none;
}
.home-search-hint {
    display: none;
    margin-top: 10px;
    color: var(--accent-orange);
    font-size: 13px;
}
.live-question-panel {
    display: none;
    max-width: 820px;
    margin: 12px 0 20px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(113,171,35,0.26);
    background: rgba(113,171,35,0.08);
}
.live-question-panel.active { display: block; }
.live-question-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.live-question-head strong { color: var(--panna); }
.live-question-panel p {
    margin: 0 0 10px;
    color: var(--panna-muted);
    font-size: 13px;
}
.live-question-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.live-question-chips button,
.home-chip-grid .context-chip {
    border: 1px solid rgba(234,230,202,0.16);
    background: rgba(255,255,255,0.045);
    color: var(--panna);
    border-radius: 999px;
    padding: 8px 11px;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}
.live-question-alt {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.live-question-alt span {
    color: rgba(234,230,202,0.55);
    font-size: 11px;
}
.home-category-explorer { margin-top: 22px; }
.home-ready-panel {
    max-width: 760px;
    margin-top: 22px;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(213,94,15,0.28);
    background: rgba(213,94,15,0.08);
}
.home-ready-panel h3 { color: var(--accent-orange); font-size: 20px; }
.home-ready-panel p { color: var(--panna-muted); margin: 8px 0 14px; }
.home-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.prompt-inspector {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 99999;
    width: min(520px, calc(100vw - 28px));
    pointer-events: none;
}
.prompt-inspector button {
    pointer-events: auto;
    float: right;
    border: 1px solid rgba(113,171,35,0.35);
    background: rgba(2,11,24,0.92);
    color: var(--accent-green);
    border-radius: 999px;
    padding: 9px 12px;
    font-weight: 900;
    cursor: pointer;
}
.prompt-inspector pre {
    display: none;
    clear: both;
    max-height: 52vh;
    overflow: auto;
    margin: 10px 0 0;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(113,171,35,0.25);
    background: rgba(2,11,24,0.95);
    color: rgba(234,230,202,0.9);
    font-size: 11px;
    white-space: pre-wrap;
    pointer-events: auto;
}
.prompt-inspector.open pre { display: block; }
.geniobox-driver {
    background: #07111c !important;
    color: var(--panna) !important;
    border: 1px solid rgba(113,171,35,0.26) !important;
    border-radius: 14px !important;
}
.geniobox-driver .driver-popover-title { color: var(--accent-green) !important; }
.geniobox-driver .driver-popover-description { color: rgba(234,230,202,0.82) !important; }
.geniobox-driver button { border-radius: 999px !important; }
@media (max-width: 860px) {
    .home-shell { width: min(100vw - 18px, 760px); padding: 18px; border-radius: 22px; }
    .home-hero { grid-template-columns: 1fr; }
    .home-workbench-head { display: block; }
    .home-workbench-head p { margin-top: 8px; }
    .home-search-row { grid-template-columns: 1fr; }
    .home-logo-row .hero-logo-symbol { width: 68px; height: 68px; }
    .home-logo-row .hero-mascot { width: 54px; height: 54px; }
}
@media (max-width: 480px) {
    .home-brand-block h2 { font-size: 29px; }
    .home-copy { font-size: 14px; }
    .home-trust-row span { width: 100%; text-align: center; }
    .intent-door { min-height: 128px !important; }
    .live-question-head { display: block; }
    .live-question-head strong { display: block; margin-top: 8px; }
}

/* Mobile home polish v2: app-like first viewport */
@media (max-width: 640px) {
    body {
        background: radial-gradient(circle at 50% -10%, rgba(6,137,228,0.22), transparent 42%), var(--bg-dark) !important;
    }
    .app-header {
        padding: 10px 12px 6px !important;
        min-height: 56px;
        align-items: center !important;
    }
    .header-logo {
        font-size: 20px !important;
        letter-spacing: 0 !important;
        gap: 7px !important;
    }
    .header-logo img {
        width: 34px !important;
        height: 34px !important;
    }
    .header-subtitle {
        display: none !important;
    }
    .header-controls {
        gap: 8px !important;
    }
    .header-extra-controls:not(.open) {
        display: none !important;
    }
    #header-menu-toggle {
        display: inline-flex !important;
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
        font-size: 20px !important;
    }
    .app-container {
        padding: 4px 10px 54px !important;
        justify-content: flex-start !important;
    }
    .home-shell {
        width: 100% !important;
        margin: 2px auto 28px !important;
        padding: 14px !important;
        border-radius: 22px !important;
        background:
            linear-gradient(180deg, rgba(6,137,228,0.18), rgba(2,11,24,0.84) 45%, rgba(113,171,35,0.10)),
            rgba(2,11,24,0.82) !important;
        box-shadow: 0 16px 44px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.08) !important;
    }
    .home-hero {
        display: block !important;
    }
    .home-tour-btn {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        float: none !important;
        padding: 7px 10px !important;
        font-size: 10px !important;
        background: rgba(255,255,255,0.06) !important;
        z-index: 2;
    }
    .home-brand-block {
        position: relative;
        padding-top: 2px;
    }
    .home-logo-row {
        gap: 10px !important;
        margin: 0 92px 10px 0 !important;
        align-items: center !important;
    }
    .home-logo-row .hero-logo-symbol {
        width: 54px !important;
        height: 54px !important;
        margin: 0 !important;
    }
    .home-logo-row .hero-mascot {
        width: 42px !important;
        height: 42px !important;
    }
    .home-kicker {
        font-size: 9px !important;
        line-height: 1.2 !important;
        letter-spacing: .06em !important;
        margin-bottom: 3px !important;
    }
    .home-brand-block h1 {
        font-size: 28px !important;
        line-height: .96 !important;
    }
    .home-payoff {
        margin: 0 0 8px !important;
        font-size: 12px !important;
    }
    .home-brand-block h2 {
        font-size: clamp(25px, 8vw, 32px) !important;
        line-height: 1.04 !important;
        max-width: 11.8em !important;
    }
    .home-copy {
        margin-top: 10px !important;
        font-size: 13px !important;
        line-height: 1.42 !important;
        color: rgba(234,230,202,0.82) !important;
    }
    .home-trust-row {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin-top: 12px !important;
    }
    .home-trust-row span {
        width: auto !important;
        min-height: 38px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 7px 5px !important;
        border-radius: 12px !important;
        font-size: 9px !important;
        line-height: 1.15 !important;
        text-align: center !important;
        letter-spacing: 0 !important;
    }
    .home-intent-panel {
        margin-top: 14px !important;
        padding: 12px !important;
        border-radius: 18px !important;
        background: rgba(255,255,255,0.04) !important;
    }
    .home-panel-head {
        margin-bottom: 10px !important;
    }
    .home-panel-head span {
        padding: 6px 9px !important;
        font-size: 9px !important;
    }
    .home-panel-head strong {
        font-size: 12px !important;
        color: rgba(234,230,202,0.72) !important;
    }
    .home-intent-panel .intent-doors {
        gap: 9px !important;
    }
    .intent-door {
        min-height: 104px !important;
        padding: 13px 14px !important;
        border-radius: 16px !important;
        display: grid !important;
        grid-template-columns: 52px minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        column-gap: 10px !important;
        align-items: center !important;
        touch-action: manipulation;
    }
    .intent-door-icon {
        grid-row: 1 / 3;
        width: 44px !important;
        height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        border-radius: 14px;
        background: rgba(255,255,255,0.07);
        font-size: 11px !important;
        font-weight: 900;
        letter-spacing: .04em;
        color: var(--panna);
    }
    .intent-door h3 {
        grid-column: 2;
        font-size: 18px !important;
        margin: 0 0 3px !important;
        line-height: 1.1 !important;
    }
    .intent-door p {
        grid-column: 2;
        font-size: 12px !important;
        line-height: 1.28 !important;
        max-width: none !important;
    }
    .intent-door-go {
        grid-column: 3;
        grid-row: 1 / 3;
        margin: 0 !important;
        padding: 7px 10px;
        border-radius: 999px;
        background: rgba(113,171,35,0.13);
        border: 1px solid rgba(113,171,35,0.25);
        font-size: 12px !important;
    }
    .home-workbench {
        margin-top: 16px !important;
        padding-top: 16px !important;
    }
    .forme-back {
        min-height: 38px !important;
        border-radius: 999px !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
    .home-workbench-head h2 {
        font-size: 25px !important;
    }
    .home-workbench-head p {
        font-size: 13px !important;
        line-height: 1.35 !important;
    }
    .home-search-panel {
        padding: 12px !important;
        border-radius: 16px !important;
    }
    .home-search-panel label {
        font-size: 12px !important;
        margin-bottom: 7px !important;
    }
    .home-search-row {
        gap: 8px !important;
    }
    .home-search-row input {
        min-height: 48px !important;
        border-radius: 14px !important;
        font-size: 15px !important;
        padding: 12px 13px !important;
    }
    .home-search-row .btn {
        min-height: 46px !important;
        border-radius: 14px !important;
        font-size: 14px !important;
    }
    .live-question-panel {
        margin: 10px 0 14px !important;
        padding: 12px !important;
        border-radius: 16px !important;
    }
    .live-question-head strong {
        font-size: 13px !important;
    }
    .live-question-chips button {
        min-height: 36px;
        border-radius: 12px !important;
        font-size: 11px !important;
    }
    .category-tabs {
        gap: 7px !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        padding-bottom: 3px !important;
        -webkit-overflow-scrolling: touch;
    }
    .category-tab {
        flex: 0 0 auto !important;
        min-height: 36px !important;
        padding: 8px 10px !important;
        border-radius: 999px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }
    .category-bubble-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 18px 0 !important;
    }
    .category-bubble {
        width: 100% !important;
        height: auto !important;
        min-height: 96px !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 18px !important;
        padding: 8px !important;
    }
    .bubble-icon {
        font-size: 25px !important;
        margin-bottom: 5px !important;
    }
    .bubble-title {
        font-size: 10px !important;
        line-height: 1.15 !important;
        max-width: 100% !important;
    }
    .home-ready-panel {
        margin-top: 14px !important;
        padding: 13px !important;
        border-radius: 16px !important;
    }
    .home-ready-panel .btn-full {
        min-height: 48px !important;
        border-radius: 14px !important;
    }
}

@media (max-width: 380px) {
    .home-brand-block h2 {
        font-size: 23px !important;
    }
    .home-copy {
        font-size: 12px !important;
    }
    .intent-door {
        grid-template-columns: 44px minmax(0, 1fr) !important;
        min-height: 96px !important;
    }
    .intent-door-go {
        display: none !important;
    }
    .category-bubble-grid {
        gap: 8px !important;
    }
}

.category-tabs:focus-visible {
    outline: 2px solid var(--accent-green);
    outline-offset: 4px;
}


/* Loader: 15 fasi luminose ben visibili */
.loading-step-dots {
    display: grid;
    grid-template-columns: repeat(15, minmax(12px, 1fr));
    gap: 8px;
    width: min(520px, 92%);
    margin: 14px auto 16px;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(2, 11, 24, 0.42);
    border: 1px solid rgba(113, 171, 35, 0.22);
    box-shadow: inset 0 0 18px rgba(0,0,0,0.35), 0 0 18px rgba(6,137,228,0.12);
}
.loading-step-dot {
    width: 100%;
    aspect-ratio: 1;
    min-width: 12px;
    border-radius: 999px;
    background: rgba(234,230,202,0.14);
    border: 1px solid rgba(234,230,202,0.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
    transition: transform .22s ease, background .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.loading-step-dot.active {
    background: radial-gradient(circle at 35% 30%, #fff8c6 0, #71ab23 42%, #0689e4 100%);
    border-color: rgba(234,230,202,0.55);
    box-shadow: 0 0 12px rgba(113,171,35,0.75), 0 0 24px rgba(6,137,228,0.32);
}
.loading-step-dot.current {
    transform: scale(1.28);
    box-shadow: 0 0 16px rgba(240,214,90,0.9), 0 0 34px rgba(113,171,35,0.52);
}
.loading-step-dot.done { opacity: .86; }
@media (max-width: 560px) {
    .loading-step-dots { gap: 5px; padding: 7px; }
    .loading-step-dot { min-width: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .loading-step-dot { transition: none; }
}


.live-question-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.live-question-start,
.live-question-alt button {
    border: 1px solid rgba(113,171,35,0.34);
    background: rgba(113,171,35,0.12);
    color: var(--panna);
    border-radius: 999px;
    padding: 9px 13px;
    font-weight: 850;
    cursor: pointer;
}
.live-question-start {
    background: linear-gradient(135deg, rgba(113,171,35,0.26), rgba(6,137,228,0.18));
    box-shadow: 0 0 18px rgba(113,171,35,0.16);
}
.live-question-alt {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.live-question-alt button {
    font-size: 12px;
    opacity: .86;
}
.live-question-start:hover,
.live-question-alt button:hover {
    transform: translateY(-1px);
    border-color: rgba(234,230,202,0.45);
}
@media (max-width: 560px) {
    .live-question-actions { align-items: stretch; }
    .live-question-start { width: 100%; }
}


/* ============================================================
   Prototype lean UX pass - mobile first, centered ocean bubbles
   ============================================================ */
.home-shell-lean {
    width: min(980px, calc(100vw - 24px));
    margin: 8px auto 36px;
    padding: clamp(18px, 4vw, 36px);
    text-align: center;
    overflow: hidden;
}
.home-brand-centered {
    max-width: 760px;
    margin: 0 auto 18px;
    text-align: center;
}
.home-logo-centered {
    justify-content: center;
    text-align: left;
}
.home-brand-centered .home-copy {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}
.home-category-ocean {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-top: 18px;
    overflow-x: hidden;
}
.home-category-ocean::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 180px;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 18%, rgba(255,153,0,0.13), transparent 34%),
        radial-gradient(circle at 80% 10%, rgba(6,137,228,0.14), transparent 38%),
        linear-gradient(180deg, rgba(234,230,202,0.04), transparent);
    opacity: .9;
}
.home-category-ocean .category-bubble-grid {
    position: relative;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: clamp(14px, 3vw, 24px);
    justify-items: center;
    align-items: center;
    margin: 24px auto 4px;
    max-width: min(900px, 100%);
    overflow-x: hidden;
}
.category-bubble-ocean {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    appearance: none;
    -webkit-appearance: none;
    width: min(100%, clamp(104px, 22vw, 136px));
    aspect-ratio: 1 / 1;
    min-height: 104px;
    padding: 14px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.13) 22%, rgba(6,137,228,0.17) 54%, rgba(2,11,24,0.72) 100%),
        rgba(6,137,228,0.08);
    border: 1.5px solid rgba(234,230,202,0.24);
    color: var(--panna);
    text-align: center;
    box-shadow:
        inset 0 7px 14px rgba(255,255,255,0.18),
        inset 0 -10px 22px rgba(0,0,0,0.36),
        0 12px 28px rgba(0,0,0,0.24),
        0 0 24px rgba(6,137,228,0.10);
}
.category-bubble-ocean .bubble-glint {
    position: absolute;
    width: 30%;
    height: 20%;
    left: 22%;
    top: 17%;
    border-radius: 999px;
    background: rgba(255,255,255,0.26);
    filter: blur(2px);
    transform: rotate(-18deg);
    pointer-events: none;
}
.category-bubble-ocean .bubble-icon {
    font-size: clamp(28px, 7vw, 40px);
    margin-bottom: 6px;
}
.category-bubble-ocean .bubble-title {
    display: block;
    max-width: 100%;
    color: var(--panna);
    font-size: clamp(10px, 2.6vw, 12px);
    line-height: 1.15;
    overflow-wrap: anywhere;
    text-transform: uppercase;
    letter-spacing: 0;
}
.category-bubble-ocean:hover,
.category-bubble-ocean:focus-visible {
    border-color: rgba(255,153,0,0.62);
    box-shadow:
        inset 0 7px 14px rgba(255,255,255,0.24),
        inset 0 -10px 22px rgba(255,153,0,0.20),
        0 14px 32px rgba(0,0,0,0.28),
        0 0 28px rgba(255,153,0,0.22);
    outline: none;
}
.quiz-screen {
    width: min(760px, calc(100vw - 22px));
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    overflow: hidden;
}
.quiz-top-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin: 0 auto 8px;
}
.quiz-back-btn {
    order: 2;
    margin: 4px auto 0;
    transform: none !important;
}
.genie-power {
    width: min(100%, 360px);
    justify-content: center;
}
.genie-power > div {
    width: 100%;
}
.genie-power-track {
    width: min(100%, 320px);
    margin: 0 auto;
}
#energy-pellets-container {
    max-width: min(100%, 340px);
    margin-left: auto !important;
    margin-right: auto !important;
    flex-wrap: wrap;
    row-gap: 7px;
}
.energy-pellet {
    width: clamp(15px, 3.8vw, 19px);
    height: clamp(15px, 3.8vw, 19px);
}
.energy-pellet.active,
.energy-pellet.filled,
.energy-pellet.on {
    background: radial-gradient(circle at 35% 30%, #fff3ca 0%, #ffb347 38%, #f07d22 72%, #7a3008 100%) !important;
    border-color: rgba(255,179,71,0.9) !important;
    box-shadow: 0 0 12px rgba(255,153,0,0.72), inset 0 2px 4px rgba(255,255,255,0.36) !important;
}
.question-container {
    text-align: center;
    align-items: center !important;
}
#alternatives-container {
    align-items: center;
}
@media (max-width: 560px) {
    .app-container { padding-left: 10px; padding-right: 10px; }
    .header-subtitle, #header-menu-toggle, #header-extra-controls { display: none !important; }
    .app-header { justify-content: center; text-align: center; }
    .brand { margin: 0 auto; }
    .home-logo-centered { flex-direction: column; text-align: center; gap: 10px; }
    .home-brand-centered h1 { font-size: clamp(38px, 13vw, 56px); }
    .home-brand-centered h2 { font-size: clamp(20px, 6vw, 28px); line-height: 1.12; }
    .home-category-ocean .category-bubble-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .category-bubble-ocean { width: min(100%, 112px); min-height: 100px; padding: 10px; }
    .quiz-screen { padding: 18px 10px !important; border-radius: 24px !important; }
    .quiz-status-text { margin-top: 10px; }
    .question-text { max-width: min(94vw, 520px); text-align: center; }
    #energy-pellets-container { gap: 5px !important; }
}

/* ============================================================
   Mobile quiz fit pass - Pixel/phone safe viewport
   Keeps the quiz readable without pushing choices below the fold.
   ============================================================ */
@media (max-width: 560px) {
    .quiz-screen {
        width: calc(100vw - 16px) !important;
        padding: 10px 8px 14px !important;
        margin-top: 4px !important;
        border-radius: 20px !important;
        overflow: visible !important;
    }

    .quiz-top-bar {
        gap: 6px !important;
        margin-bottom: 4px !important;
    }

    .quiz-back-btn {
        padding: 6px 13px !important;
        font-size: 12px !important;
        border-radius: 16px !important;
        margin-top: 2px !important;
    }

    .genie-power-mini-pct {
        font-size: 10px !important;
    }

    .genie-power-track {
        height: 15px !important;
        width: min(82vw, 300px) !important;
    }

    #energy-pellets-container {
        gap: 4px !important;
        row-gap: 4px !important;
        margin-top: 5px !important;
    }

    .energy-pellet {
        width: clamp(13px, 3.3vw, 17px) !important;
        height: clamp(13px, 3.3vw, 17px) !important;
    }

    .quiz-status-text {
        margin: 6px 0 0 !important;
        min-height: 16px !important;
        font-size: 12px !important;
    }

    .question-text {
        font-size: clamp(20px, 5.4vw, 24px) !important;
        line-height: 1.24 !important;
        margin: 8px auto 24px !important;
        max-width: 94vw !important;
    }

    .quiz-options-container {
        gap: 10px !important;
        width: 100% !important;
        max-width: 520px !important;
    }

    .quiz-options-container.layout-grid-2x2 {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .option-card,
    .quiz-option-card,
    #alternatives-container button,
    #alternatives-container .btn-option-frutiger {
        min-height: 64px !important;
        padding: 12px 14px !important;
        border-radius: 18px !important;
        font-size: 15px !important;
        line-height: 1.18 !important;
    }

    .option-icon {
        font-size: 24px !important;
        margin-bottom: 5px !important;
    }

    .option-text,
    .quiz-option-text {
        font-size: 15px !important;
        line-height: 1.18 !important;
        margin-bottom: 0 !important;
    }

    .option-desc {
        font-size: 12px !important;
        line-height: 1.25 !important;
        margin-top: 4px !important;
    }

    .quiz-tertiary {
        margin-top: 10px !important;
    }

    .quiz-tertiary .genio-help-btn {
        font-size: 11px !important;
        padding: 4px 10px 4px 4px !important;
    }

    .quiz-tertiary .genio-help-icon {
        width: 22px !important;
        height: 22px !important;
    }

    #quiz-purpose-note {
        font-size: 11px !important;
        line-height: 1.25 !important;
        margin-top: 8px !important;
        max-width: 92vw !important;
    }
}

@media (max-width: 560px) {
    #engine-quiz:not(.hidden) .quiz-tertiary,
    #engine-quiz:not(.hidden) #quiz-purpose-note {
        display: none !important;
    }

    main:has(#engine-quiz:not(.hidden)) + .app-footer {
        display: none !important;
    }
}

/* Beta home: primo schermo a due percorsi, come index.dev.html */
.beta-intent-home {
    width: min(100vw - 28px, 1040px);
    margin: 20px auto 10px;
    padding: 30px 28px;
    border-radius: 30px;
    background: linear-gradient(145deg, rgba(4, 28, 48, 0.94), rgba(9, 20, 35, 0.96));
    border: 1px solid rgba(130, 190, 255, 0.28);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255,255,255,0.08);
}

.beta-app .app-header,
.beta-app .app-footer {
    display: none;
}

.beta-home-logo {
    margin: 0 auto 14px;
}

.beta-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(46, 204, 113, 0.35);
    color: var(--accent-green);
    background: rgba(46, 204, 113, 0.08);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.beta-home-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(34px, 6vw, 44px);
    letter-spacing: 0.08em;
    color: var(--panna);
    line-height: 1;
}

.beta-home-title span {
    color: var(--accent-green);
}

.beta-home-payoff {
    margin: 10px 0 20px;
    color: var(--panna-muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.42em;
}

.beta-home-question {
    margin: 0 0 10px;
    font-size: 23px;
    color: var(--panna);
}

.beta-home-subtitle {
    margin: 0 auto 28px;
    max-width: 680px;
    color: var(--panna-muted);
    font-size: 17px;
    font-style: italic;
    font-weight: 700;
}

.beta-intent-doors {
    justify-content: center;
    align-items: stretch;
    gap: 18px;
    max-width: 620px;
}

.beta-intent-doors .intent-door {
    text-align: left;
    min-height: 210px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#category-explorer.home-category-ocean {
    margin-top: 0;
}

@media (max-width: 640px) {
    .beta-intent-home {
        width: min(100vw - 18px, 760px);
        padding: 22px 16px;
        border-radius: 24px;
    }

    .beta-home-payoff {
        letter-spacing: 0.22em;
        font-size: 9px;
    }

    .beta-home-subtitle {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .beta-intent-doors .intent-door {
        min-height: 155px;
        padding: 20px;
    }
}


.amazon-text-badge {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #111827;
    font-weight: 900;
    font-size: 15px;
    border: 3px solid #ff9900;
    box-shadow: 0 8px 22px rgba(0,0,0,0.22);
}