*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:      #fafbfc;      /* Soft Light White */
      --surface: rgba(255, 255, 255, 0.75); /* Glass surface */
      --surface2:#ffffff;
      --border:  rgba(0, 0, 0, 0.05);
      --border2: rgba(0, 0, 0, 0.08);
      --accent:  #c8a550;
      --accent2: #a07830;
      --orange:  #ff7a18;
      --green:   #10b981;
      --text:    #1e293b;      /* Elegant dark ink for light mode */
      --muted:   #64748b;
      --mono:    'IBM Plex Mono', monospace;
      --sans:    'Inter', 'Plus Jakarta Sans', sans-serif;
      --r:       8px;
      --glow:    0 0 32px rgba(200,165,80,0.12);
    }

    html { scroll-behavior: smooth; }
    h1, h2, h3, h4 { font-family: 'Sora', 'Plus Jakarta Sans', sans-serif; color: var(--text); }
    body, p, button, input, select, label, nav, a { font-family: 'Inter', 'Plus Jakarta Sans', sans-serif; }
    body { padding-top: 60px; font-family:var(--sans); background:var(--bg); color:var(--text); min-height:100vh; overflow-x:hidden; position:relative; }

    /* corner glows - soft pastels for light mode */
    body::before {
      content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
      background:
        radial-gradient(ellipse 65% 55% at -10% -10%,   rgba(200,165,80,0.06) 0%, transparent 65%),
        radial-gradient(ellipse 55% 50% at 110% 0%,  rgba(200,165,80,0.04) 0%, transparent 60%),
        radial-gradient(ellipse 50% 45% at -5% 100%, rgba(160,120,48,0.04) 0%, transparent 60%),
        radial-gradient(ellipse 55% 55% at 105% 100%,rgba(200,165,80,0.06) 0%, transparent 60%);
    }
    /* subtle dot pattern */
    body::after {
      content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
      background-image: radial-gradient(rgba(0,0,0,0.02) 1px, transparent 1px);
      background-size: 32px 32px;
    }

    /* ── Floating language words ──────────────── */
    .floating-words {
      position: fixed; inset: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 0;
    }
    .fw {
      position: absolute;
      font-family: 'Sora', var(--sans), sans-serif;
      font-weight: 700;
      white-space: nowrap;
      will-change: transform;
      animation: floatWord linear infinite;
      text-shadow: none;
    }
    .fw-lg { font-size: 3.2rem; color: rgba(0,0,0,0.06); }
    .fw-md { font-size: 2.2rem; color: rgba(0,0,0,0.07); }
    .fw-sm { font-size: 1.5rem; color: rgba(0,0,0,0.08); }
    .fw-xs { font-size: 1.1rem; color: rgba(0,0,0,0.09); }

    .fw:nth-child(1)  { top: 6%;  left: 3%;  animation-duration: 35s; animation-delay: 0s; }
    .fw:nth-child(2)  { top: 14%; right: 5%; animation-duration: 40s; animation-delay: -8s; }
    .fw:nth-child(3)  { top: 24%; left: 8%;  animation-duration: 32s; animation-delay: -4s; }
    .fw:nth-child(4)  { top: 4%;  left: 45%; animation-duration: 38s; animation-delay: -12s; }
    .fw:nth-child(5)  { top: 34%; right: 3%; animation-duration: 36s; animation-delay: -2s; }
    .fw:nth-child(6)  { top: 20%; left: 70%; animation-duration: 42s; animation-delay: -16s; }
    .fw:nth-child(7)  { top: 44%; left: 5%;  animation-duration: 34s; animation-delay: -6s; }
    .fw:nth-child(8)  { top: 55%; left: 55%; animation-duration: 37s; animation-delay: -10s; }
    .fw:nth-child(9)  { top: 10%; left: 25%; animation-duration: 44s; animation-delay: -14s; }
    .fw:nth-child(10) { top: 65%; right: 8%; animation-duration: 33s; animation-delay: -3s; }
    .fw:nth-child(11) { top: 50%; left: 30%; animation-duration: 39s; animation-delay: -18s; }
    .fw:nth-child(12) { top: 16%; right: 20%;animation-duration: 41s; animation-delay: -7s; }
    .fw:nth-child(13) { top: 72%; left: 65%; animation-duration: 36s; animation-delay: -20s; }
    .fw:nth-child(14) { top: 30%; left: 85%; animation-duration: 38s; animation-delay: -5s; }
    .fw:nth-child(15) { top: 60%; left: 15%; animation-duration: 43s; animation-delay: -11s; }
    .fw:nth-child(16) { top: 78%; right: 15%;animation-duration: 35s; animation-delay: -9s; }
    .fw:nth-child(17) { top: 68%; left: 8%;  animation-duration: 40s; animation-delay: -13s; }
    .fw:nth-child(18) { top: 82%; left: 45%; animation-duration: 36s; animation-delay: -7s; }
    .fw:nth-child(19) { top: 75%; right: 3%; animation-duration: 42s; animation-delay: -15s; }
    .fw:nth-child(20) { top: 85%; left: 25%; animation-duration: 34s; animation-delay: -9s; }
    .fw:nth-child(21) { top: 40%; left: 90%; animation-duration: 38s; animation-delay: -17s; }
    .fw:nth-child(22) { top: 88%; right: 25%;animation-duration: 37s; animation-delay: -4s; }

    @keyframes floatWord {
      0%   { transform: translate(0, 0) rotate(-2deg); opacity: 0; }
      5%   { opacity: 1; }
      25%  { transform: translate(30px, -20px) rotate(1deg); }
      50%  { transform: translate(-15px, -40px) rotate(-1deg); opacity: 1; }
      75%  { transform: translate(20px, -15px) rotate(2deg); }
      95%  { opacity: 1; }
      100% { transform: translate(0, 0) rotate(-2deg); opacity: 0; }
    }

    @media (max-width: 768px) {
      .floating-words { display: none; }
    }

    .wrapper { position:relative; z-index:1; max-width:820px; margin:0 auto; padding:48px 24px 100px; }

    /* ── Header ───────────────────────────────── */
    header { margin-bottom:52px; animation:fadeDown .6s ease both; }
    .logo-row { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
    .logo-icon {
      width:36px; height:36px; background:var(--accent); border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      box-shadow:var(--glow); animation:pulse 3s ease-in-out infinite;
    }
    .logo-icon svg { width:18px; height:18px; color:var(--bg); }
    h1 {
      font-size:clamp(2rem,6vw,3.2rem); font-weight:800; letter-spacing:-1px; line-height:1;
      background:linear-gradient(135deg,#1e293b 0%,var(--accent) 75%,var(--accent2) 100%);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    }
    .tagline { font-family:var(--mono); font-size:.76rem; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; margin-top:6px; font-weight: 500;}

    /* ── Card (Liquid Glass) ──────────────────── */
    .card { background:rgba(255,255,255,0.7); backdrop-filter:blur(24px) saturate(160%); -webkit-backdrop-filter:blur(24px) saturate(160%); border:1px solid rgba(255,255,255,0.8); border-top:1px solid rgba(255,255,255,1); border-radius:18px; box-shadow:0 14px 40px rgba(0,0,0,0.04), 0 4px 10px rgba(0,0,0,0.02), inset 0 1px 0 rgba(255,255,255,0.6); padding:32px; margin-bottom:24px; position: relative; }
    .card-label {
      font-family:var(--mono); font-size:.65rem; font-weight:600;
      letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
      margin-bottom:20px; display:flex; align-items:center; gap:8px;
    }
    .card-label::before { content:''; display:block; width:18px; height:2px; background:var(--accent); opacity:.4; border-radius:2px;}

    /* ── Form inputs ──────────────────────────── */
    .field { margin-bottom:18px; }
    label { display:block; font-size:.78rem; color:var(--muted); margin-bottom:7px; font-family:var(--mono); letter-spacing:.04em; font-weight:600; }
    input[type="text"], select {
      width:100%; background:rgba(0,0,0,0.02); border:1px solid rgba(0,0,0,0.08); border-radius:12px;
      color:var(--text); font-family:'IBM Plex Mono', var(--mono), monospace; font-size:.88rem; padding:14px 16px;
      transition:all .3s cubic-bezier(0.4, 0, 0.2, 1); outline:none; -webkit-appearance:none;
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.01);
    }
    input:focus, select:focus { border-color:#c8a550; box-shadow:0 0 0 4px rgba(200,165,80,.1), 0 4px 15px rgba(200,165,80,.08); background: #fff;}
    input::placeholder { color:#94a3b8; }
    select {
      cursor:pointer;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat:no-repeat; background-position:right 14px center; padding-right:36px;
    }
    select option { background:#ffffff; color: var(--text); }
    .form-row { display:flex; gap:12px; align-items:flex-end; }
    .form-row > .field:first-child { flex: 1; }
    @media(max-width:520px){
      .form-row { flex-direction:column; align-items:stretch; }
      .form-row > .field[style*="flex:0"] { flex: 1 1 auto !important; }
      .voice-toggle {
        width: 100%;
        justify-content: center;
      }
      .voice-btn {
        flex: 1;
        justify-content: center;
        padding: 10px 12px;
        font-size: 0.78rem;
        min-width: 0;
      }
      /* Form compatto su mobile */
      .hero-form-card { padding: 18px 14px; }
      .field { margin-bottom: 14px; }
      label { font-size: 0.72rem; margin-bottom: 5px; }
      input[type="text"], select { padding: 12px 14px; font-size: 0.82rem; }
      .form-row { gap: 8px; }
      /* Language selector mobile */
      .cs-trigger { padding: 12px 14px !important; font-size: 0.82rem !important; }
    }

    .btn-translate {
      width:100%; border:none; border-radius:12px;
      font-family:var(--sans); font-size:1.05rem; font-weight:700; letter-spacing:.02em;
      padding:17px 28px; cursor:pointer;
      display:flex; align-items:center; justify-content:center; gap:10px; margin-top:10px;
      background: linear-gradient(135deg, #c8a550, #a07830);
      color: #fff;
      box-shadow: 0 0 30px rgba(200,165,80,0.25), 0 4px 20px rgba(0,0,0,0.3);
      transition: all .3s;
      position: relative; overflow: hidden;
    }
    .btn-translate::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,0.15) 50%, transparent 70%);
      transform: translateX(-100%);
      animation: shimmerBtn 3s ease-in-out infinite;
    }
    @keyframes shimmerBtn {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }
    .btn-translate:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 0 60px rgba(200,165,80,.4), 0 8px 30px rgba(0,0,0,.3); }
    .btn-translate:active:not(:disabled) { transform:translateY(0); }
    .btn-translate:disabled { opacity:.45; cursor:not-allowed; background:#8a7040; }

    .error-msg {
      display:none; margin-bottom:14px;
      background:rgba(255,61,107,.07); border:1px solid rgba(255,61,107,.25);
      border-radius:var(--r); padding:11px 15px;
      font-family:var(--mono); font-size:.8rem; color:var(--accent2); line-height:1.6;
    }

    /* ═══════════════════════════════════════════
       LOADING (Light Mode)
    ═══════════════════════════════════════════ */
    #loading-section {
      display:none;
      overflow: hidden;
      animation: slideOpen .5s ease both;
    }
    @keyframes slideOpen {
      from { max-height: 0; opacity: 0; }
      to   { max-height: 400px; opacity: 1; }
    }

    .loading-card {
      background: linear-gradient(150deg, #231441 0%, #0f081e 100%) !important;
      color: #e2e8f0 !important;
      border: 1px solid rgba(200,165,80,0.3);
      border-top: none;
      border-radius: 0 0 18px 18px;
      padding: 14px 20px 10px;
      max-width: 480px;
      margin: 0 auto;
      position:relative; overflow:hidden;
    }
    .loading-card .step-label { color: #e2e8f0; }
    .loading-card .step-num { color: #94a3b8; }
    .loading-card .step-sublabel { color: rgba(200,165,80,.8); }
    .loading-card .step-row.waiting { opacity: .35; }
    .loading-card .step-row.done .step-label { color: #94a3b8; }
    .loading-card .progress-label { color: #94a3b8; }
    .loading-card .loading-note { color: #94a3b8; }
    .loading-card .progress-track { background: rgba(255,255,255,.1); }
    .loading-card .step-badge.model { background: rgba(200,165,80,.15); border-color: rgba(200,165,80,.3); }
    .loading-card .step-icon { border-color: rgba(255,255,255,.15); }
    .loading-card .step-row.active .step-icon { border-color: var(--accent); }
    .loading-card.active::before {
      content:''; position:absolute; inset:0; border-radius: 0 0 18px 18px; padding:1.5px;
      background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent));
      background-size:200% 100%;
      -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite:xor; mask-composite:exclude;
      animation:borderSlide 2s linear infinite;
    }

    .steps-list { margin-bottom:14px; }
    .step-row {
      display:flex; align-items:center; gap:10px; padding:7px 0;
      border-bottom:1px solid var(--border); transition:opacity .4s;
    }
    .step-row:last-child { border-bottom:none; }
    .step-row.waiting { opacity:.2; }
    .step-row.active  { opacity:1; }
    .step-row.done    { opacity:.5; }

    .step-icon {
      width:26px; height:26px; border-radius:50%; flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      background:var(--bg); border:1px solid var(--border2); transition:all .3s;
    }
    .step-row.active .step-icon { background:rgba(200,165,80,.1); border-color:var(--accent); box-shadow:0 0 12px rgba(200,165,80,.25); }
    .step-row.done   .step-icon { background:rgba(34,197,94,.1); border-color:var(--green); }

    .step-ring { width:14px; height:14px; border:2px solid rgba(200,165,80,.3); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
    .step-check { color:var(--green); font-size:.9rem; font-weight:700; }
    .step-num { font-family:var(--mono); font-size:.65rem; color:var(--muted); }

    .step-body { flex:1; min-width:0; }
    .step-label { font-family:var(--mono); font-size:.75rem; color:var(--text); display:block; }
    .step-row.done .step-label { color:var(--muted); }
    .step-sublabel { font-family:var(--mono); font-size:.68rem; color:rgba(200,165,80,.6); display:none; margin-top:2px; }
    .step-row.active .step-sublabel { display:block; }

    .step-badge { font-family:var(--mono); font-size:.62rem; padding:2px 7px; border-radius:3px; flex-shrink:0; }
    .step-badge.model { background:rgba(200,165,80,.07); border:1px solid rgba(200,165,80,.2); color:var(--accent); }
    .step-badge.time  { background:rgba(34,197,94,.07); border:1px solid rgba(34,197,94,.2); color:var(--green); }

    .progress-wrap { margin-bottom:4px; }
    .progress-header { display:flex; justify-content:space-between; margin-bottom:8px; }
    .progress-label { font-family:var(--mono); font-size:.66rem; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; }
    .progress-pct   { font-family:var(--mono); font-size:.72rem; color:var(--accent); font-weight:500; }
    .progress-track { height:3px; background:var(--border2); border-radius:3px; overflow:hidden; }
    .progress-fill {
      height:100%; width:0%; border-radius:3px;
      background:linear-gradient(90deg,var(--accent) 0%,var(--accent2) 100%);
      transition:width .8s cubic-bezier(.4,0,.2,1); position:relative;
    }
    .progress-fill::after {
      content:''; position:absolute; right:0; top:0; bottom:0; width:50px;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.4));
      animation:shimmer 1.4s ease-in-out infinite;
    }
    .loading-note { font-family:var(--mono); font-size:.68rem; color:var(--muted); margin-top:10px; display:flex; align-items:center; gap:6px; }
    .loading-note::before { content:'//'; color:var(--accent); opacity:.5; }

    /* ═══════════════════════════════════════════
       RESULT SECTION
    ═══════════════════════════════════════════ */
    #result-section {
      display:none; animation:fadeUp .5s ease both;
      /* Break out dal hero (max-width:740px) per essere largo come pricing (1100px) */
      width:100vw;
      max-width:1100px;
      margin-left:50%;
      transform:translateX(-50%);
      padding:0 24px;
      box-sizing:border-box;
    }

    .result-card { background:transparent; border:none; box-shadow:none; border-radius:0; overflow:visible; margin-bottom:20px; }

    .result-banner {
      display:none;
    }

    /* ═══════════════════════════════════════════
       RESULT MODAL
    ═══════════════════════════════════════════ */
    #result-modal-overlay {
      display: none; position: fixed; inset: 0; z-index: 9999;
      background: rgba(255,255,255,0.82);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      align-items: flex-start; justify-content: center;
      padding: 40px 24px;
      overflow-y: auto;
    }
    #result-modal-overlay.open { display: flex; }

    .result-modal {
      width: 100%; max-width: 900px;
      position: relative;
      animation: fadeUp .4s ease both;
      padding-top: 50px;
    }

    .result-modal-close {
      position: absolute; top: 0; right: 0;
      background: rgba(0,0,0,0.06);
      border: 1px solid rgba(0,0,0,0.1);
      color: rgba(0,0,0,0.5);
      width: 40px; height: 40px; border-radius: 50%;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: all .2s; z-index: 10;
    }
    .result-modal-close:hover { background: rgba(0,0,0,0.1); color: #000; }

    /* Video player TV */
    .result-modal-player {
      position: relative;
      width: 100%;
      aspect-ratio: 16/9;
      background: #000;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,0,0,0.8);
      border: 1px solid rgba(255,255,255,0.08);
    }
    .result-modal-player #result-yt-container { width: 100%; height: 100%; }
    .result-modal-player iframe { width: 100%; height: 100%; }

    /* Stats */
    .result-modal-stats {
      display: flex; gap: 14px; margin-top: 24px;
    }
    .result-modal-stat {
      flex: 1; padding: 14px 16px;
      background: linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.3) 100%);
      backdrop-filter: blur(24px) saturate(200%);
      -webkit-backdrop-filter: blur(24px) saturate(200%);
      border: 1px solid rgba(255,255,255,0.6);
      border-radius: 12px;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4), 0 8px 20px -6px rgba(0,0,0,0.08);
      display: flex; flex-direction: column; gap: 4px;
    }
    .result-modal-stat-label {
      font-family: var(--mono); font-size: .58rem;
      color: #64748b; letter-spacing: .08em; text-transform: uppercase;
    }
    .result-modal-stat-value {
      font-family: var(--mono); font-size: .86rem;
      color: #1a1a2e; font-weight: 600;
    }

    /* Transcript collapsible */
    .result-modal-transcript {
      margin-top: 12px;
      background: linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.3) 100%);
      backdrop-filter: blur(24px) saturate(200%);
      -webkit-backdrop-filter: blur(24px) saturate(200%);
      border: 1px solid rgba(255,255,255,0.6);
      border-radius: 12px;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4), 0 8px 20px -6px rgba(0,0,0,0.08);
      overflow: hidden;
    }
    .result-modal-transcript-header {
      padding: 14px 16px;
      display: flex; align-items: center; justify-content: space-between;
      cursor: pointer;
      font-family: var(--mono); font-size: .72rem;
      color: #a07830; letter-spacing: .05em;
      transition: background .2s;
    }
    .result-modal-transcript-header:hover { background: rgba(160,120,48,0.06); }
    .result-modal-transcript-header svg { transition: transform .3s; color: #a07830; }
    .result-modal-transcript-header.open svg { transform: rotate(180deg); }
    .result-modal-transcript-body {
      padding: 0 16px;
      max-height: 0; overflow: hidden;
      transition: max-height .4s ease, padding .3s ease;
      font-size: .85rem; color: #334155;
      line-height: 1.7; white-space: pre-wrap;
    }
    .result-modal-transcript-body.open {
      max-height: 300px; overflow-y: auto;
      padding: 0 16px 16px;
    }

    /* Action buttons */
    .result-modal-actions {
      display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap;
    }
    .result-modal-btn {
      flex: 1; min-width: 140px;
      padding: 14px 18px; border-radius: 12px;
      font-family: var(--sans); font-size: .88rem; font-weight: 600;
      cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
      transition: all .2s; text-decoration: none; border: none;
    }
    .result-modal-btn.primary {
      background: linear-gradient(135deg, #10b981, #059669);
      color: #fff;
      box-shadow: 0 0 20px rgba(16,185,129,0.3);
    }
    .result-modal-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 0 30px rgba(16,185,129,0.5); }
    .result-modal-btn.secondary {
      background: rgba(160,120,48,0.08);
      border: 1px solid rgba(160,120,48,0.2);
      color: #a07830;
    }
    .result-modal-btn.secondary:hover { background: rgba(160,120,48,0.15); }
    .result-modal-btn.ghost {
      background: rgba(0,0,0,0.04);
      border: 1px solid rgba(0,0,0,0.1);
      color: #475569;
    }
    .result-modal-btn.ghost:hover { background: rgba(0,0,0,0.08); color: #1a1a2e; }

    /* Mobile result modal */
    @media (max-width: 600px) {
      #result-modal-overlay { padding: 16px 12px; }
      .result-modal { max-width: 100%; }
      .result-modal-close { top: 12px; right: 12px; width: 36px; height: 36px; }
      .result-modal-stats { flex-wrap: wrap; }
      .result-modal-stat { flex: 1 0 45%; }
      .result-modal-actions { flex-direction: column; }
      .result-modal-btn { min-width: 100%; }
      #summary-modal-overlay { padding: 16px 12px; }
      .summary-modal-body { padding: 16px 18px; max-height: 60vh; }
      .summary-modal-title { font-size: 1.1rem; }
    }
    .live-dot { width:8px; height:8px; background:var(--green); border-radius:50%; box-shadow:0 0 8px rgba(34,197,94,.7); animation:pulse 1.8s ease-in-out infinite; flex-shrink:0; }
    .result-banner-text { font-family:var(--mono); font-size:.72rem; color:var(--text); flex:1; }
    .result-badge { font-family:var(--mono); font-size:.62rem; padding:3px 9px; border-radius:20px; color:var(--green); border:1px solid rgba(34,197,94,.3); background:rgba(34,197,94,.06); }
    .result-close-btn { background:none; border:none; cursor:pointer; color:rgba(255,255,255,0.5); padding:4px; margin-left:8px; border-radius:6px; transition:all 0.2s; display:flex; align-items:center; }
    .result-close-btn:hover { color:#fff; background:rgba(255,255,255,0.1); }

    /* Titolo video */
    .video-title-wrap { padding:20px 24px 0; display:none; }
    .video-title-label { font-family:var(--mono); font-size:.62rem; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; margin-bottom:6px; }
    .video-title-text { font-family:var(--sans); font-size:1.05rem; font-weight:700; color:var(--text); line-height:1.35; }

    /* ══════════════════════════════════════════
       VAIVOX CUSTOM PLAYER
    ══════════════════════════════════════════ */

    /* Wrapper esterno player — stile TV pulito */
    .vx-player-wrap {
      position: relative;
      background: #000;
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: 0 20px 40px rgba(0,0,0,0.6);
      margin: 0;
    }

    /* Area video 16:9 */
    .vx-video-area {
      position: relative;
      aspect-ratio: 16/9;
      background: #000;
      overflow: hidden;
    }
    #yt-player-container { width:100%; height:100%; }

    /* Watermark */
    .vx-watermark {
      position: absolute;
      bottom: 14px; right: 14px;
      font-family: var(--mono);
      font-size: .63rem;
      color: rgba(255,255,255,.4);
      text-shadow: 0 1px 6px rgba(0,0,0,.9);
      letter-spacing: .05em;
      pointer-events: none;
      display: flex; align-items: center; gap: 6px;
      transition: opacity .3s;
      z-index: 10;
    }
    .vx-watermark.hidden { opacity: 0; }
    .vx-wm-dot {
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 6px var(--accent);
      animation: pulse 2s ease-in-out infinite;
    }

    /* Badge lingua — top right video */
    .vx-lang-badge {
      position: absolute;
      top: 12px; right: 12px;
      display: flex; gap: 5px;
      z-index: 11;
    }
    .vx-lang-btn {
      font-family: var(--mono);
      font-size: .62rem; font-weight: 600;
      letter-spacing: .05em;
      padding: 5px 11px;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,.12);
      cursor: pointer;
      transition: all .2s;
      backdrop-filter: blur(10px);
      background: rgba(0,0,0,.55);
      color: rgba(255,255,255,.4);
      display: flex; align-items: center; gap: 5px;
    }
    .vx-lang-btn.active-dub {
      background: rgba(200,165,80,.15);
      border-color: rgba(200,165,80,.45);
      color: var(--accent);
    }
    .vx-lang-btn.active-orig {
      background: rgba(255,255,255,.1);
      border-color: rgba(255,255,255,.28);
      color: #fff;
    }

    /* Overlay caricamento */
    .vx-overlay {
      position: absolute; inset: 0;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 12px;
      background: rgba(9,11,16,.82);
      backdrop-filter: blur(6px);
      transition: opacity .4s;
      z-index: 20;
    }
    .vx-overlay.hidden { opacity:0; pointer-events:none; }
    .vx-overlay-spinner {
      width: 30px; height: 30px;
      border: 2px solid var(--border2);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin .8s linear infinite;
    }
    .vx-overlay-text {
      font-family: var(--mono); font-size: .72rem;
      color: var(--muted); text-align: center; line-height: 1.7;
    }

    /* Errore embedding */
    .yt-embed-error {
      display:none; padding:24px; text-align:center;
      font-family:var(--mono); font-size:.78rem;
      color:var(--muted); line-height:1.6;
      background: var(--surface);
    }
    .yt-embed-error strong { color:var(--accent2); display:block; margin-bottom:8px; }

    /* ── Barra controlli — nascosta, sync via YouTube play ── */
    .vx-controls {
      display: none;
    }

    /* Waveform */
    .vx-waveform {
      display: flex; align-items: center; gap: 2px;
      height: 28px; margin-bottom: 8px; overflow: hidden;
    }
    .wave-bar { flex:1; border-radius:2px; min-height:3px; background:rgba(255,255,255,.07); transition:background .1s; }
    .wave-bar.played { background:rgba(200,165,80,.2); }
    .wave-bar.active { background:var(--accent); box-shadow:0 0 5px rgba(200,165,80,.4); }

    /* Progress bar */
    .vx-progress-wrap {
      position: relative;
      height: 18px;
      display: flex; align-items: center;
      cursor: pointer;
      margin-bottom: 6px;
    }
    .vx-progress-track {
      width: 100%; height: 3px;
      background: rgba(255,255,255,.09);
      border-radius: 3px; overflow: hidden;
      transition: height .15s;
    }
    .vx-progress-wrap:hover .vx-progress-track { height: 5px; }
    .vx-progress-fill {
      height: 100%; width: 0%;
      background: linear-gradient(90deg, #3B82F6, rgba(200,165,80,.8));
      border-radius: 3px;
      transition: width .15s linear;
      pointer-events: none;
    }
    .vx-progress-thumb {
      position: absolute;
      width: 12px; height: 12px; border-radius: 50%;
      background: #3B82F6;
      box-shadow: 0 0 8px rgba(59,130,246,.7);
      top: 50%; transform: translate(-50%,-50%);
      left: 0%; opacity: 0;
      transition: opacity .15s;
      pointer-events: none;
    }
    .vx-progress-wrap:hover .vx-progress-thumb { opacity: 1; }

    /* Row pulsanti */
    .vx-btn-row {
      display: flex; align-items: center; gap: 8px;
    }

    /* Tasto PLAY — rotondo blu */
    .vx-play-btn {
      width: 50px; height: 50px;
      border-radius: 50%;
      background: #3B82F6;
      border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: transform .15s, box-shadow .2s;
      box-shadow: 0 0 22px rgba(59,130,246,.38);
      position: relative;
    }
    .vx-play-btn:hover {
      transform: scale(1.07);
      box-shadow: 0 0 38px rgba(59,130,246,.65);
    }
    .vx-play-btn:active { transform: scale(.95); }
    .vx-play-btn.idle::after {
      content: '';
      position: absolute; inset: -5px;
      border-radius: 50%;
      border: 2px solid rgba(59,130,246,.3);
      animation: pulse-ring 2s ease-out infinite;
    }
    @keyframes pulse-ring {
      0%   { transform: scale(1); opacity: .7; }
      100% { transform: scale(1.4); opacity: 0; }
    }

    /* Tasti secondari */
    .vx-ctrl-btn {
      width: 32px; height: 32px; border-radius: 50%;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.07);
      color: rgba(255,255,255,.45);
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all .15s; flex-shrink: 0;
    }
    .vx-ctrl-btn:hover {
      background: rgba(255,255,255,.1);
      color: #fff;
      border-color: rgba(255,255,255,.18);
    }

    /* Tempi */
    .vx-times {
      font-family: var(--mono); font-size: .68rem;
      color: rgba(255,255,255,.38);
      white-space: nowrap; flex-shrink: 0;
    }
    .vx-times .cur { color: rgba(255,255,255,.75); }

    .vx-spacer { flex: 1; }

    /* Status */
    .vx-status {
      font-family: var(--mono); font-size: .62rem;
      color: rgba(255,255,255,.3);
      white-space: nowrap; transition: color .3s;
    }
    .vx-status.playing { color: var(--green); }
    .vx-status.loading { color: var(--accent); }

    /* Offset */
    .vx-offset-wrap {
      display: flex; align-items: center; gap: 6px;
      font-family: var(--mono); font-size: .6rem;
      color: rgba(255,255,255,.3);
    }
    .vx-offset-wrap .vx-off-val { color: rgba(200,165,80,.7); }
    input[type=range].vx-offset-slider {
      -webkit-appearance:none; appearance:none;
      width:70px; height:3px;
      background:rgba(255,255,255,.1);
      border-radius:3px; outline:none; cursor:pointer;
    }
    .vx-fs-btn {
      width: 32px; height: 32px; border-radius: 50%;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.07);
      color: rgba(255,255,255,.45);
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all .15s; flex-shrink: 0;
    }
    .vx-fs-btn:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.18); }

    /* ── Mobile Result Overlay ──────────────────────── */
    #mobile-result-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: #0a0810;
      flex-direction: column;
      overflow-y: auto;
    }
    #mobile-result-overlay.open { display: flex; }
    @media (min-width: 601px) { #mobile-result-overlay { display: none !important; } }

    .mob-result-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 16px;
      background: #0d0b14;
      border-bottom: 1px solid rgba(200,165,80,0.35);
      flex-shrink: 0;
    }
    .mob-result-back {
      background: none; border: none; color: var(--accent);
      font-family: var(--mono); font-size: 0.8rem;
      cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 0;
    }
    .mob-result-badge {
      font-family: var(--mono); font-size: 0.6rem; color: #4ade80;
      border: 1px solid rgba(74,222,128,.5); background: rgba(74,222,128,.12);
      border-radius: 20px; padding: 3px 9px;
    }
    .mob-video-title {
      padding: 14px 16px 8px;
      font-family: var(--sans); font-size: 0.95rem; font-weight: 700;
      color: #ffffff; line-height: 1.4; background: #000; flex-shrink: 0;
    }
    .mob-player-wrap { width: 100%; aspect-ratio: 16/9; background: #000; flex-shrink: 0; }
    .mob-lang-row { display: flex; gap: 8px; padding: 14px 16px 0; }
    .mob-lang-btn {
      flex: 1; padding: 10px; border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.07);
      color: rgba(255,255,255,0.75); font-family: var(--mono); font-size: 0.75rem;
      cursor: pointer; text-align: center; transition: all .2s;
    }
    .mob-lang-btn.active { border-color: var(--accent); color: #fff; background: rgba(200,165,80,0.25); }
    .mob-controls { padding: 14px 16px; background: #0d0b14; flex-shrink: 0; }
    .mob-progress-track {
      width: 100%; height: 4px; background: rgba(255,255,255,0.15);
      border-radius: 2px; margin-bottom: 14px; cursor: pointer; position: relative;
    }
    .mob-progress-fill {
      height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2));
      border-radius: 2px; width: 0%;
    }
    .mob-btn-row { display: flex; align-items: center; gap: 16px; }
    .mob-play-btn {
      width: 54px; height: 54px; border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      border: none; display: flex; align-items: center; justify-content: center;
      cursor: pointer; flex-shrink: 0; box-shadow: 0 0 24px rgba(200,165,80,0.5);
    }
    .mob-seek-btn {
      background: none; border: none; color: rgba(255,255,255,0.8);
      cursor: pointer; padding: 8px; display: flex; align-items: center;
    }
    .mob-times { font-family: var(--mono); font-size: 0.85rem; color: #ffffff; }
    .mob-actions { display: flex; gap: 10px; padding: 0 16px 16px; }
    .mob-action-btn {
      flex: 1; padding: 13px; border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.08);
      color: #ffffff; font-family: var(--sans); font-size: 0.85rem; font-weight: 600;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      gap: 8px; text-decoration: none;
    }
    .mob-action-btn.primary {
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color: #000; border: none;
    }
    .mob-yt-link {
      margin: 0 16px 14px;
      display: flex; align-items: center; justify-content: center; gap: 10px;
      padding: 12px; border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.8); font-family: var(--mono); font-size: 0.78rem;
      text-decoration: none;
    }
    .mob-stats {
      display: flex; gap: 1px; background: rgba(255,255,255,0.08);
      border-top: 1px solid rgba(255,255,255,0.1);
    }
    .mob-stat { flex: 1; background: #0d0b14; padding: 12px 10px; display: flex; flex-direction: column; gap: 3px; }
    .mob-stat-label { font-family: var(--mono); font-size: 0.6rem; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 1px; }
    .mob-stat-value { font-family: var(--mono); font-size: 0.85rem; color: #ffffff; font-weight: 600; }

    @media (max-width: 600px) {
      /* Contrasto aumentato per uso all'aperto */
      label, .label, .step-label, .stat-label,
      .extras-header-title, .progress-label,
      .loading-note, .step-sublabel { color: #ffffff !important; }

      .stat-value, .step-sublabel { color: rgba(255,255,255,0.75) !important; }

      input, select, textarea {
        color: #ffffff !important;
        background: rgba(255,255,255,0.1) !important;
        border-color: rgba(255,255,255,0.3) !important;
      }
      input::placeholder { color: rgba(255,255,255,0.4) !important; }

      .card, .result-card, .extras-card {
        background: rgba(15,12,25,0.98) !important;
        border-color: rgba(255,255,255,0.12) !important;
      }

      /* Watch how it works — più piccolo su mobile */
      #watch-demo-btn {
        padding: 7px 14px !important;
        font-size: 0.78rem !important;
        gap: 7px !important;
        margin-top: 10px !important;
      }
      #watch-demo-btn > span:first-child {
        width: 22px !important; height: 22px !important;
      }

      /* Contatori — più compatti */
      #hero-counters {
        padding: 7px 14px !important;
        gap: 12px !important;
      }
      #hero-counters .counter-num { font-size: 0.8rem !important; }
      #hero-counters .counter-label { font-size: 0.58rem !important; }
      #hero-counters .counter-emoji { font-size: 0.9rem !important; }

      /* Pipeline box più compatta su mobile */
      .loading-card {
        padding: 14px 14px !important;
        margin: 8px 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
      }
      .card-label { font-size: 0.62rem !important; margin-bottom: 10px !important; }
      .step-row { padding: 7px 0 !important; gap: 10px !important; }
      .step-icon { width: 24px !important; height: 24px !important; flex-shrink: 0; }
      .step-num { font-size: 0.7rem !important; }
      .step-label { font-size: 0.82rem !important; }
      .step-sublabel { font-size: 0.72rem !important; }
      .step-badge { font-size: 0.6rem !important; padding: 2px 6px !important; }
      .progress-bar-wrap { margin-top: 10px !important; }
      .progress-label { font-size: 0.62rem !important; }

      /* Wrapper principale */
      .wrapper { padding-left: 0 !important; padding-right: 0 !important; }

      /* Card form e card generiche */
      .card {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        padding: 20px 16px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 12px !important;
      }

      /* Result card */
      .result-card {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 12px !important;
      }

      /* Player video */
      .vx-player-wrap {
        margin: 12px 0 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
      }

      /* Titolo video */
      .video-title-wrap { padding: 16px 16px 0 !important; }

      /* Link YouTube */
      .yt-link-wrap { padding: 0 16px 16px !important; }

      /* Stats */
      .stats-row { margin-left: 0 !important; margin-right: 0 !important; }

      /* Download buttons */
      .download-row { padding: 12px 16px !important; }

      /* Press play hint */
      #press-play-hint { font-size: 0.8rem !important; }
    }
    .vx-player-wrap:fullscreen          { border-radius:0; margin:0; }
    .vx-player-wrap:-webkit-full-screen { border-radius:0; margin:0; }
    .vx-player-wrap:fullscreen .vx-video-area,
    .vx-player-wrap:-webkit-full-screen .vx-video-area {
      aspect-ratio: unset; height: calc(100vh - 110px);
    }
    input[type=range].vx-offset-slider::-webkit-slider-thumb {
      -webkit-appearance:none; width:11px; height:11px;
      border-radius:50%; background:var(--accent);
      border:2px solid #080c16; cursor:pointer;
    }

    /* Bottone YouTube fallback */
    .yt-link-wrap { display:none; }
    .yt-link-btn {
      display:none;
      transition:all .2s; width:100%; justify-content:center;
    }
    .yt-link-btn:hover { border-color:var(--accent2); color:var(--text); background:rgba(255,61,107,.06); }
    .yt-icon { color:#ff0000; }

    audio { display:none; }

        /* Stats */
    .stats-row { display:flex; gap:8px; margin:16px 0 0; }
    .stat { flex:1; background:rgba(15,12,25,0.85); backdrop-filter:blur(10px); padding:14px 16px; display:flex; flex-direction:column; gap:4px; border-radius:12px; border:1px solid rgba(200,165,80,0.15); }
    .stat-label { font-family:var(--mono); font-size:.58rem; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
    .stat-value { font-family:var(--mono); font-size:.86rem; color:var(--text); font-weight:500; }
    @media(max-width:480px){ .stats-row { flex-wrap:wrap; margin:12px 0 0; } .stat { flex:1 0 45%; } }

    /* Offset slider */
    .offset-wrap { display:flex; align-items:center; gap:8px; flex-shrink:0; }
    .offset-label { font-family:var(--mono); font-size:.65rem; color:var(--muted); white-space:nowrap; }
    .offset-label span { color:var(--accent); font-weight:600; }
    input[type=range].offset-slider {
      -webkit-appearance:none; appearance:none;
      width:90px; height:3px; background:var(--border2); border-radius:3px; outline:none; cursor:pointer;
    }
    input[type=range].offset-slider::-webkit-slider-thumb {
      -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
      background:var(--accent); border:2px solid var(--bg); cursor:pointer;
    }
    input[type=range].offset-slider::-moz-range-thumb {
      width:14px; height:14px; border-radius:50%;
      background:var(--accent); border:2px solid var(--bg); cursor:pointer;
    }

    footer { text-align:center; margin-top:48px; font-family:var(--mono); font-size:.68rem; }

    /* ── Animations ─────────────────────────────── */
    @keyframes spin        { to { transform:rotate(360deg); } }
    @keyframes pulse       { 0%,100%{opacity:1} 50%{opacity:.45} }
    @keyframes fadeDown    { from{opacity:0;transform:translateY(-14px)} to{opacity:1;transform:none} }
    @keyframes fadeUp      { from{opacity:0;transform:translateY(12px)}  to{opacity:1;transform:none} }
    @keyframes borderSlide { 0%{background-position:0%} 100%{background-position:200%} }
    @keyframes shimmer     { 0%{transform:translateX(-50px)} 100%{transform:translateX(60px)} }

    /* ── Login Screen ─────────────────────────── */
    /* ── Auth Screen ──────────────────────────── */
    #auth-screen {
      position: fixed; inset: 0; z-index: 9999;
      background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
      display: flex; align-items: center; justify-content: center;
    }
    .auth-box {
      position: relative; z-index: 1;
      background: rgba(255,255,255,0.85);
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      border: 1px solid rgba(255,255,255,1);
      box-shadow: 0 24px 80px rgba(0,0,0,0.15), 0 0 60px rgba(200,165,80,0.1);
      border-radius: 20px; padding: 40px 36px;
      width: 100%; max-width: 420px;
      color-scheme: light;
    }
    .auth-close {
      position: absolute; top: 14px; right: 18px;
      background: none; border: none; color: rgba(0,0,0,0.35);
      font-size: 1.6rem; cursor: pointer; line-height: 1;
      transition: color .2s;
    }
    .auth-close:hover { color: rgba(0,0,0,0.8); }
    .auth-logo {
      display: flex; align-items: center; justify-content: center; gap: 10px;
      margin-bottom: 6px;
    }
    .auth-logo span {
      font-family: var(--sans); font-size: 1.6rem; font-weight: 800;
      color: var(--text); letter-spacing: -0.5px;
    }
    .auth-subtitle {
      text-align: center; margin-bottom: 24px;
      font-family: var(--sans); font-size: 0.9rem;
      color: var(--muted);
    }
    .auth-tabs {
      display: flex; margin-bottom: 24px;
      border-bottom: 1px solid rgba(0,0,0,0.08);
    }
    .auth-tab {
      flex: 1; padding: 10px; text-align: center; cursor: pointer;
      font-family: var(--sans); font-size: 0.85rem; font-weight: 600;
      color: var(--muted); border-bottom: 2px solid transparent;
      margin-bottom: -1px; transition: color .2s, border-color .2s;
    }
    .auth-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
    .auth-google-btn {
      width: 100%; padding: 12px; margin-bottom: 0;
      display: flex; align-items: center; justify-content: center; gap: 10px;
      background: #f8fafc; color: #333; border: 1px solid rgba(0,0,0,0.06); border-radius: 12px;
      font-family: var(--sans); font-size: 0.9rem; font-weight: 600;
      box-shadow: 0 2px 4px rgba(0,0,0,0.02);
      cursor: pointer; transition: background .2s, box-shadow .2s;
    }
    .auth-google-btn:hover { background: #ffffff; box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.1); }
    .auth-divider {
      display: flex; align-items: center; gap: 12px;
      margin: 20px 0;
      color: var(--muted); font-family: var(--sans); font-size: 0.78rem;
    }
    .auth-divider::before, .auth-divider::after {
      content: ''; flex: 1; height: 1px; background: rgba(0,0,0,0.08);
    }
    .auth-field { margin-bottom: 16px; }
    .auth-field label {
      display: block; margin-bottom: 6px;
      font-family: var(--sans); font-size: 0.8rem; font-weight: 600;
      color: var(--muted);
    }
    .auth-field input {
      width: 100%; padding: 12px 14px;
      background: rgba(0,0,0,0.06) !important; border: 1px solid rgba(0,0,0,0.15);
      border-radius: 12px; color: #1a1a2e !important;
      color-scheme: light;
      font-family: var(--sans); font-size: 0.9rem;
      outline: none; transition: border-color .2s, box-shadow .2s; box-shadow: inset 0 2px 4px rgba(0,0,0,0.03);
    }
    .auth-field input:focus {
      border-color: var(--accent); background: #ffffff;
      box-shadow: 0 0 0 4px rgba(200,165,80,0.1), 0 4px 15px rgba(200,165,80,0.08);
    }
    .auth-field input::placeholder { color: #94a3b8; }
    .auth-input-wrap {
      position: relative;
    }
    .auth-input-wrap input { padding-right: 44px; }
    .auth-eye {
      position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
      background: none; border: none; color: rgba(0,0,0,0.35); /* Grigio scuro invece di bianco trasparente */
      cursor: pointer; padding: 4px; display: flex; align-items: center;
      transition: color .2s;
    }
    .auth-eye:hover { color: rgba(0,0,0,0.8); }
    .auth-strength {
      height: 3px; margin-top: 8px; border-radius: 3px;
      background: rgba(255,255,255,0.06); overflow: hidden;
    }
    .auth-strength-bar {
      height: 100%; width: 0; border-radius: 3px;
      transition: width .3s, background .3s;
    }
    .auth-strength-label {
      font-family: var(--sans); font-size: 0.7rem; font-weight: 500;
      margin-top: 4px; min-height: 16px;
      transition: color .3s;
    }
    .auth-field-error {
      font-family: var(--sans); font-size: 0.72rem; color: #f87171;
      margin-top: 4px; min-height: 0; display: none;
    }
    .auth-field-error.visible { display: block; }
    .auth-field input.input-error {
      border-color: #f87171 !important;
      box-shadow: 0 0 0 3px rgba(248,113,113,0.15) !important;
    }
    .auth-btn {
      width: 100%; margin-top: 20px; padding: 13px;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color: #fff; border: none; border-radius: 10px;
      font-family: var(--sans); font-size: 0.95rem; font-weight: 700;
      cursor: pointer; transition: opacity .2s, transform .1s;
    }
    .auth-btn:hover { opacity: .9; }
    .auth-btn:active { transform: scale(0.98); }
    .auth-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
    .auth-msg {
      margin-top: 14px; text-align: center;
      font-family: var(--sans); font-size: 0.82rem; display: none;
    }
    .auth-msg.error { color: #f87171; }
    .auth-msg.success { color: #4ade80; }
    .auth-link {
      background: none; border: none; color: rgba(255,255,255,0.4);
      font-size: 0.82rem; cursor: pointer; font-family: var(--sans);
      transition: color .2s;
    }
    .auth-link:hover { color: var(--accent); }
    .auth-user-bar {
      display: none; position: relative; z-index: 100;
      background:linear-gradient(160deg, rgba(28,18,45,0.98) 0%, rgba(10,8,16,0.99) 100%); border:1px solid rgba(200,165,80,0.18);
      border-top:1px solid rgba(200,165,80,0.4); box-shadow:0 2px 0 rgba(200,165,80,0.12), 0 8px 32px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.03); border-radius: 8px; padding: 8px 14px;
      font-family: var(--mono); font-size: 0.72rem; color: var(--muted);
      display: flex; align-items: center; gap: 12px;
    }
    .auth-user-email { color: #fff; }
    .auth-logout-btn {
      background: none; border: none; color: var(--muted);
      cursor: pointer; font-family: var(--mono); font-size: 0.7rem;
      text-transform: uppercase; letter-spacing: 1px;
      transition: color .2s;
    }
    .auth-logout-btn:hover { color: var(--accent2); }


    /* ── Custom Select ────────────────────────── */
    .custom-select { position: relative; width: 100%; }
    .cs-selected {
      display: flex; align-items: center; gap: 10px;
      padding: 11px 14px; cursor: pointer;
      background: var(--surface2); border: 1px solid var(--border2);
      border-radius: var(--r); color: var(--text);
      font-family: var(--sans); font-size: 0.9rem;
      transition: border-color .2s;
      user-select: none;
    }
    .cs-selected:hover { border-color: var(--accent); }
    .custom-select.open .cs-selected { border-color: var(--accent); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
    .cs-arrow { margin-left: auto; color: var(--muted); transition: transform .2s; flex-shrink: 0; }
    .custom-select.open .cs-arrow { transform: rotate(180deg); }
    .cs-flag { display:flex; align-items:center; }
    .cs-name { flex: 1; }
    .cs-dropdown {
      display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 100;
      background: #0d0d0d; /* Nero richiesto dall'utente */
      border: 1px solid var(--accent);
      border-top: none; border-bottom-left-radius: var(--r); border-bottom-right-radius: var(--r);
      max-height: 280px; overflow-y: auto;
    }
    .custom-select.open .cs-dropdown { display: block; }
    .cs-option {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 14px; cursor: pointer;
      font-family: var(--sans); font-size: 0.88rem; color: #e8ecf5; /* Testo chiaro su scuro */
      transition: background .15s;
    }
    .cs-option:hover { background: #1a1a2e; } /* Hover leggero dark */
    .cs-option.selected { color: var(--accent); }
    .cs-separator { height: 1px; background: var(--border2); margin: 4px 0; }
    .cs-beta { color: var(--muted); }
    .cs-beta:hover { color: var(--text); }
    .cs-beta-tag {
      margin-left: auto; font-size: 0.65rem; font-family: var(--mono);
      background: rgba(200,165,80,0.1); color: var(--accent);
      padding: 2px 6px; border-radius: 4px; letter-spacing: 1px;
    }


    /* ── Top Nav Login Button ─────────────────── */
    .nav-login-btn {
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      border: none;
      border-radius: 8px; padding: 8px 20px;
      font-family: var(--sans); font-size: 0.85rem; font-weight: 600; color: #000;
      cursor: pointer; transition: opacity .2s, transform .15s;
      box-shadow: 0 0 16px rgba(200,165,80,0.4);
    }
    .nav-login-btn:hover { opacity: 0.85; transform: translateY(-1px); }
    /* auth-screen mobile adjustments */
    @media (max-width: 480px) {
      .auth-box { padding: 32px 24px; margin: 0 12px; border-radius: 14px; }
    }


    /* ── Extras Section ───────────────────────── */
    #extras-section { display:none; animation:fadeUp .5s ease both; }
    .extras-card {
      background:linear-gradient(160deg, rgba(28,18,45,0.98) 0%, rgba(10,8,16,0.99) 100%); border:1px solid rgba(200,165,80,0.18);
      border-top:1px solid rgba(200,165,80,0.4); border-radius: 10px; box-shadow:0 2px 0 rgba(200,165,80,0.12), 0 8px 32px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.03); overflow: hidden; margin-bottom: 20px;
    }
    .extras-header {
      display: flex; align-items: center;
      padding: 14px 20px; border-bottom: 1px solid var(--border);
      background: var(--surface2);
    }
    .extras-header-title {
      font-family: var(--mono); font-size: .68rem;
      color: var(--muted); letter-spacing: .12em; text-transform: uppercase;
    }
    .transcript-box {
      padding: 20px; max-height: 220px; overflow-y: auto;
      font-family: var(--mono); font-size: .82rem; line-height: 1.7;
      color: var(--text); white-space: pre-wrap;
      border-bottom: 1px solid var(--border);
    }
    .transcript-box::-webkit-scrollbar { width: 4px; }
    .transcript-box::-webkit-scrollbar-track { background: var(--surface2); }
    .transcript-box::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }
    .download-row { display: flex; gap: 12px; padding: 16px 20px; flex-wrap: wrap; }
    .dl-btn {
      display: flex; align-items: center; gap: 8px;
      padding: 10px 18px; border-radius: var(--r); cursor: pointer;
      font-family: var(--mono); font-size: .75rem; font-weight: 500;
      text-decoration: none; transition: opacity .2s, transform .1s; border: none;
    }
    .dl-btn:hover { opacity: .85; transform: translateY(-1px); }
    .dl-btn-audio { background: var(--accent); color: #000; }
    .dl-btn-txt { background: var(--surface2); color: var(--text); border: 1px solid var(--border2); }


    /* ── Dashboard ────────────────────────────── */
    #dashboard-screen {
      display: none; position: fixed; inset: 0; z-index: 8000;
      background: var(--bg); overflow-y: auto;
    }
    .dash-wrap {
      max-width: 960px; margin: 0 auto; padding: 90px 24px 80px;
      position: relative; z-index: 1;
    }
    .dash-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 40px;
    }
    .dash-title {
      font-family: var(--sans); font-size: 1.5rem; font-weight: 800;
      color: var(--text); letter-spacing: -0.5px;
    }
    .dash-title span { color: var(--accent); }
    .dash-close-btn {
      background:linear-gradient(160deg, rgba(28,18,45,0.98) 0%, rgba(10,8,16,0.99) 100%); border:1px solid rgba(200,165,80,0.18);
      border-top:1px solid rgba(200,165,80,0.4); box-shadow:0 2px 0 rgba(200,165,80,0.12), 0 8px 32px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.03); border-radius: 8px; padding: 8px 16px; cursor: pointer;
      font-family: var(--mono); font-size: 0.72rem; color: #f1f5f9;
      text-transform: uppercase; letter-spacing: 1px; transition: color .2s, border-color .2s;
    }
    .dash-close-btn:hover { color: #fff; border-color: var(--accent); }

    /* Stats row */
    .dash-stats {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 16px; margin-bottom: 32px;
    }
    .dash-stat-card {
      background: var(--surface); border: 2px solid rgba(200,165,80,.35);
      border-radius: 10px; padding: 20px;
    }
    .dash-stat-label {
      font-family: var(--mono); font-size: 0.65rem; color: var(--muted);
      text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px;
    }
    .dash-stat-value {
      font-family: var(--sans); font-size: 1.6rem; font-weight: 800;
      color: var(--text);
    }
    .dash-stat-value.accent { color: var(--accent); }
    .dash-stat-value.green { color: var(--green); }
    .dash-stat-sub {
      font-family: var(--mono); font-size: 0.68rem; color: var(--muted);
      margin-top: 4px;
    }

    /* Progress bar */
    .dash-progress-wrap { margin-top: 10px; }
    .dash-progress-track {
      height: 4px; background: var(--border2); border-radius: 4px; overflow: hidden;
    }
    .dash-progress-fill {
      height: 100%; background: var(--accent); border-radius: 4px;
      transition: width .5s ease;
    }
    .dash-progress-fill.warn { background: #f59e0b; }
    .dash-progress-fill.danger { background: var(--accent2); }

    /* Section title */
    .dash-section-title {
      font-family: var(--mono); font-size: 0.7rem; color: var(--muted);
      text-transform: uppercase; letter-spacing: 2px; margin-bottom: 16px;
      padding-bottom: 8px; border-bottom: 1px solid var(--border);
    }

    /* User info card (for regular users) */
    .dash-user-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px; padding: 24px; margin-bottom: 24px;
    }
    .dash-user-row {
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 12px;
    }
    .dash-user-email-big {
      font-family: var(--sans); font-size: 1.1rem; font-weight: 700;
      color: var(--text);
    }
    .dash-plan-badge {
      font-family: var(--mono); font-size: 0.65rem; padding: 4px 10px;
      border-radius: 20px; text-transform: uppercase; letter-spacing: 1px;
      background: rgba(200,165,80,0.1); color: var(--accent);
      border: 1px solid rgba(200,165,80,0.3);
    }
    .dash-plan-badge.pro {
      background: rgba(34,197,94,0.1); color: var(--green);
      border-color: rgba(34,197,94,0.3);
    }

    /* Admin table */
    .dash-table-wrap {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px; overflow: hidden;
    }
    .dash-table {
      width: 100%; border-collapse: collapse;
      font-family: var(--mono); font-size: 0.78rem;
    }
    .dash-table th {
      padding: 12px 16px; text-align: left;
      background: var(--surface2); color: var(--muted);
      text-transform: uppercase; letter-spacing: 1px; font-size: 0.65rem;
      border-bottom: 1px solid var(--border2);
    }
    .dash-table td {
      padding: 12px 16px; color: var(--text);
      border-bottom: 1px solid var(--border);
    }
    .dash-table tr:last-child td { border-bottom: none; }
    .dash-table tr:hover td { background: var(--surface2); }
    .dash-badge {
      display: inline-block; font-size: 0.62rem; padding: 2px 8px;
      border-radius: 20px; text-transform: uppercase; letter-spacing: 1px;
    }
    .dash-badge-free { background: rgba(90,99,128,0.2); color: var(--muted); border: 1px solid var(--border2); }
    .dash-badge-pro { background: rgba(34,197,94,0.1); color: var(--green); border: 1px solid rgba(34,197,94,0.3); }
    .dash-badge-admin { background: rgba(200,165,80,0.1); color: var(--accent); border: 1px solid rgba(200,165,80,0.3); }
    .dash-mini-bar {
      display: flex; align-items: center; gap: 8px;
    }
    .dash-mini-track {
      flex: 1; height: 3px; background: var(--border2);
      border-radius: 3px; overflow: hidden; min-width: 60px;
    }
    .dash-mini-fill {
      height: 100%; background: var(--accent); border-radius: 3px;
    }
    .dash-loading {
      padding: 40px; text-align: center;
      font-family: var(--mono); font-size: 0.78rem; color: var(--muted);
    }
    .dash-empty {
      padding: 40px; text-align: center;
      font-family: var(--mono); font-size: 0.78rem; color: var(--muted);
    }

    /* ── Admin SaaS extras ────────────────────── */
    .adm-stats-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 14px; margin-bottom: 28px;
    }
    .adm-stat {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px; padding: 18px 20px;
    }
    .adm-stat-label {
      font-family: var(--mono); font-size: 0.62rem; color: var(--muted);
      text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px;
    }
    .adm-stat-val {
      font-family: var(--sans); font-size: 1.5rem; font-weight: 800; color: var(--text);
    }
    .adm-stat-val.c-accent { color: var(--accent); }
    .adm-stat-val.c-green  { color: var(--green); }
    .adm-stat-val.c-muted  { color: var(--muted); }
    .adm-chart-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px; padding: 20px; margin-bottom: 28px;
    }
    .adm-chart-title {
      font-family: var(--mono); font-size: 0.65rem; color: var(--muted);
      text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 16px;
    }
    .adm-table-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px; overflow: hidden;
    }
    .adm-table-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 20px; border-bottom: 1px solid var(--border);
      background: var(--surface2);
    }
    .adm-table-title {
      font-family: var(--mono); font-size: 0.65rem; color: var(--muted);
      text-transform: uppercase; letter-spacing: 1.5px;
    }
    .adm-table { width: 100%; border-collapse: collapse; }
    .adm-table th {
      padding: 11px 16px; text-align: left; background: var(--surface2);
      font-family: var(--mono); font-size: 0.62rem; color: var(--muted);
      text-transform: uppercase; letter-spacing: 1px;
      border-bottom: 1px solid var(--border2);
    }
    .adm-table td {
      padding: 12px 16px; color: var(--text); font-family: var(--mono);
      font-size: 0.78rem; border-bottom: 1px solid var(--border);
      vertical-align: middle;
    }
    .adm-table tr:last-child td { border-bottom: none; }
    .adm-table tr:hover td { background: rgba(255,255,255,0.02); }
    .adm-btn {
      padding: 5px 12px; border-radius: 6px; font-family: var(--mono);
      font-size: 0.68rem; cursor: pointer; border: 1px solid transparent;
      transition: opacity .15s; font-weight: 500;
    }
    .adm-btn-add { background: rgba(200,165,80,0.1); color: var(--accent); border-color: rgba(200,165,80,0.3); }
    .adm-btn-del { background: rgba(255,61,107,0.1); color: var(--accent2); border-color: rgba(255,61,107,0.3); }
    .adm-btn:hover { opacity: 0.75; }
    .adm-btn-actions { display: flex; gap: 6px; }
    .adm-prog { display: flex; align-items: center; gap: 8px; }
    .adm-prog-track { flex: 1; height: 3px; background: var(--border2); border-radius: 3px; min-width: 50px; }
    .adm-prog-fill { height: 100%; background: var(--accent); border-radius: 3px; }
    #adm-modal-overlay {
      display: none; position: fixed; inset: 0; z-index: 9998;
      background: rgba(0,0,0,0.92); align-items: center; justify-content: center;
    }
    #adm-modal-overlay.open { display: flex; }
    .adm-modal {
      background: var(--surface2); border: 1px solid var(--border2);
      border-radius: 12px; padding: 28px; width: 100%; max-width: 400px;
    }
    .adm-modal-title {
      font-family: var(--sans); font-size: 1rem; font-weight: 700;
      color: var(--text); margin-bottom: 20px;
    }
    .adm-modal-field { margin-bottom: 14px; }
    .adm-modal-field label {
      display: block; font-family: var(--mono); font-size: 0.68rem;
      color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 1px;
    }
    .adm-modal-field input {
      width: 100%; background: var(--surface); border: 1px solid var(--border2);
      border-radius: 6px; padding: 10px 12px; color: var(--text);
      font-family: var(--mono); font-size: 0.85rem; outline: none;
    }
    .adm-modal-field input:focus { border-color: var(--accent); }
    .adm-modal-actions { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; }
    .adm-modal-btn-cancel {
      padding: 8px 18px; border-radius: 6px; font-family: var(--mono); font-size: 0.75rem;
      background: var(--surface); border: 1px solid var(--border2); color: var(--muted); cursor: pointer;
    }
    .adm-modal-btn-submit {
      padding: 8px 18px; border-radius: 6px; font-family: var(--mono); font-size: 0.75rem;
      background: var(--accent); border: none; color: #000; font-weight: 700; cursor: pointer;
    }

    /* ── Dashboard Upgrade CTA ─────────────────── */
    .dash-upgrade-cta {
      display: flex; align-items: center; justify-content: space-between; gap: 16px;
      background: linear-gradient(135deg, rgba(200,165,80,0.12), rgba(124,92,255,0.08));
      border: 1px solid rgba(200,165,80,0.25); border-radius: 12px;
      padding: 20px 24px; margin-bottom: 20px; flex-wrap: wrap;
    }
    .dash-upgrade-btn {
      display: inline-flex; align-items: center; gap: 6px;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color: #fff; font-family: var(--sans); font-size: 0.85rem; font-weight: 700;
      padding: 10px 20px; border-radius: 10px; text-decoration: none;
      white-space: nowrap; transition: opacity .2s;
    }
    .dash-upgrade-btn:hover { opacity: 0.85; }

    /* ── Dashboard Tabs ────────────────────────── */
    .dash-tabs {
      display: flex; gap: 0; margin-bottom: 24px;
      border-bottom: 1px solid var(--border2);
    }
    .dash-tab {
      flex: 1; padding: 12px 16px; text-align: center; cursor: pointer;
      font-family: var(--sans); font-size: 0.85rem; font-weight: 600;
      color: var(--muted); background: none; border: none;
      border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
    }
    .dash-tab.active { color: #fff; border-bottom-color: var(--accent); }
    .dash-tab:hover { color: var(--text); }

    /* ── Admin Toolbar ─────────────────────────── */
    .adm-toolbar {
      display: flex; gap: 10px; align-items: center; margin-bottom: 14px;
    }
    .adm-search-input {
      flex: 1; padding: 9px 14px;
      background: var(--surface); border: 1px solid var(--border2);
      border-radius: 8px; color: var(--text);
      font-family: var(--mono); font-size: 0.8rem; outline: none;
      transition: border-color .2s;
    }
    .adm-search-input:focus { border-color: var(--accent); }
    .adm-search-input::placeholder { color: var(--muted); }
    .adm-btn-export {
      background: rgba(200,165,80,0.1); border: 1px solid rgba(200,165,80,0.3);
      color: var(--accent); white-space: nowrap;
    }
    .adm-btn-export:hover { background: rgba(200,165,80,0.2); }

    /* ── Admin plan select ─────────────────────── */
    .adm-plan-select {
      padding: 4px 8px; border-radius: 6px;
      background: var(--surface); border: 1px solid var(--border2);
      color: var(--text); font-family: var(--mono); font-size: 0.72rem;
      cursor: pointer; outline: none;
    }
    .adm-plan-select:focus { border-color: var(--accent); }

    /* ── User detail modal ─────────────────────── */
    .adm-detail-overlay {
      display: none; position: fixed; inset: 0; z-index: 10000;
      background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
      align-items: center; justify-content: center;
    }
    .adm-detail-overlay.open { display: flex; }
    .adm-detail-box {
      background: linear-gradient(160deg, rgba(28,18,45,0.98), rgba(10,8,16,0.99));
      border: 1px solid rgba(200,165,80,0.22); border-radius: 14px;
      padding: 32px; max-width: 600px; width: 90%; max-height: 80vh; overflow-y: auto;
    }
    .adm-detail-title { font-family: var(--sans); font-size: 1.1rem; font-weight: 700; color: #fff; margin-bottom: 16px; }
    .adm-detail-section { margin-bottom: 16px; }
    .adm-detail-label { font-family: var(--mono); font-size: 0.65rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
    .adm-detail-close {
      position: absolute; top: 14px; right: 18px;
      background: none; border: none; color: rgba(255,255,255,0.4);
      font-size: 1.4rem; cursor: pointer;
    }
    .adm-detail-close:hover { color: #fff; }

    /* ── Error chart card ──────────────────────── */
    .adm-errors-chart-card {
      background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
      padding: 18px 20px; margin-bottom: 14px;
    }

    /* ── Admin Responsive ──────────────────────── */
    @media (max-width: 768px) {
      .adm-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
      .adm-table-card { overflow-x: auto; }
      .adm-table { min-width: 500px; }
      .adm-chart-card div[style*="height"] { height: 140px !important; }
      .adm-toolbar { flex-wrap: wrap; }
      .adm-search-input { min-width: 0; }
      .adm-detail-box { padding: 20px; max-width: 95%; }
      .adm-modal { max-width: 90%; }
      .trust-bar { gap: 20px; flex-wrap: wrap; }
    }

    /* ── Global BG gradient (v2 style) ────────── */
    body {
      padding-top: 60px;
      background:
        radial-gradient(ellipse 80% 50% at 20% 0%, rgba(200,165,80,0.18) 0%, transparent 55%),
        radial-gradient(ellipse 60% 40% at 80% 10%, rgba(160,120,48,0.15) 0%, transparent 55%),
        radial-gradient(ellipse 50% 60% at 50% 100%, rgba(200,165,80,0.12) 0%, transparent 55%),
        radial-gradient(ellipse 40% 30% at 90% 60%, rgba(236,72,153,0.10) 0%, transparent 55%);
      background-color: #f0f0f0;
      background-attachment: fixed;
    }

    /* Dot grid overlay */
    .bg-grid {
      position: fixed; inset: 0; z-index: 0; pointer-events: none;
      background-image: radial-gradient(rgba(200,165,80,0.10) 1.2px, transparent 1.2px);
      background-size: 36px 36px;
      mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 70%);
      -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 70%);
    }

    /* Floating orbs */
    .bg-orb {
      position: fixed; border-radius: 50%;
      filter: blur(60px); will-change: transform;
      pointer-events: none; z-index: 0;
    }
    .bg-orb-1 {
      width: 650px; height: 650px;
      background: radial-gradient(circle, rgba(200,165,80,0.20) 0%, rgba(200,165,80,0.05) 50%, transparent 70%);
      top: -15%; right: -10%;
      animation: orb1 22s ease-in-out infinite;
    }
    .bg-orb-2 {
      width: 500px; height: 500px;
      background: radial-gradient(circle, rgba(160,120,48,0.15) 0%, rgba(160,120,48,0.04) 50%, transparent 70%);
      top: 25%; left: -12%;
      animation: orb2 28s ease-in-out infinite;
    }
    .bg-orb-3 {
      width: 550px; height: 550px;
      background: radial-gradient(circle, rgba(236,72,153,0.10) 0%, rgba(236,72,153,0.02) 50%, transparent 70%);
      bottom: -5%; right: 10%;
      animation: orb3 20s ease-in-out infinite;
    }
    @keyframes orb1 {
      0%, 100% { transform: translate(0,0) scale(1); }
      33% { transform: translate(-50px,70px) scale(1.08); }
      66% { transform: translate(40px,-40px) scale(0.94); }
    }
    @keyframes orb2 {
      0%, 100% { transform: translate(0,0) scale(1); }
      33% { transform: translate(60px,-50px) scale(0.95); }
      66% { transform: translate(-30px,60px) scale(1.06); }
    }
    @keyframes orb3 {
      0%, 100% { transform: translate(0,0) scale(1); }
      33% { transform: translate(-40px,-60px) scale(1.04); }
      66% { transform: translate(50px,30px) scale(0.92); }
    }

    /* ── Navbar ─────────────────────────────────── */
    .navbar {
      position: fixed; top: 0; left: 0; right: 0; z-index: 9995;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 32px; height: 60px;
      background: rgba(10,10,10,0.96);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .navbar-center-links { display: flex; }
    #navbar-right-slot { display: flex; }
    .navbar-logo {
      display: flex; align-items: center; gap: 10px;
      font-family: var(--sans); font-size: 1.1rem; font-weight: 800;
      color: var(--text); letter-spacing: -0.3px;
    }
    .navbar-logo-dot {
      width: 28px; height: 28px; border-radius: 8px;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      display: flex; align-items: center; justify-content: center;
    }
    .navbar-logo-dot svg { width: 14px; height: 14px; color: #fff; }
    .navbar-right { display: flex; align-items: center; gap: 10px; }

    /* ── Hero ───────────────────────────────────── */
    .hero {
      padding: 36px 24px 36px;
      text-align: center;
      max-width: 740px; margin: 0 auto;
    }
    .hero-badge {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 6px 18px; border-radius: 100px;
      background: rgba(200,165,80,0.06);
      border: 1px solid rgba(200,165,80,0.15);
      font-family: 'IBM Plex Mono', var(--mono), monospace; font-size: 0.7rem; font-weight: 500;
      color: #a07830; letter-spacing: 0.06em;
      margin-bottom: 28px;
      animation: fadeUp 0.5s ease both;
    }
    .hero-badge-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: #22c55e;
      box-shadow: 0 0 8px rgba(34,197,94,0.7);
      animation: pulse 2s ease-in-out infinite;
    }
    @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.5; } }
    .hero h1 {
      font-family: 'Sora', var(--sans), sans-serif;
      font-size: clamp(2.4rem, 5.5vw, 3.8rem);
      font-weight: 800; line-height: 1.05; letter-spacing: -2px;
      color: #1a1a2e; margin-bottom: 20px;
      animation: fadeUp 0.6s ease 0.1s both;
    }
    .hero h1 .grad {
      background: linear-gradient(135deg, #c8a550 0%, #d4b872 50%, #a07830 100%);
      background-size: 200% auto;
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: gradientShift 4s ease infinite;
    }
    @keyframes gradientShift {
      0%, 100% { background-position: 0% center; }
      50% { background-position: 100% center; }
    }

    /* Demo button with animated glowing border */
    .demo-btn-glow {
      position: relative;
      margin-top: 14px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: rgba(0,0,0,0.4);
      border: none;
      border-radius: 100px;
      padding: 12px 24px;
      color: #fff;
      font-family: var(--sans);
      font-size: 0.88rem;
      font-weight: 500;
      cursor: pointer;
      transition: all .3s;
      backdrop-filter: blur(6px);
      z-index: 1;
    }
    .demo-btn-glow::before {
      content: '';
      position: absolute;
      inset: -2px;
      border-radius: 100px;
      background: conic-gradient(
        from var(--btn-angle, 0deg),
        transparent 0%,
        rgba(200,165,80,0.8) 25%,
        rgba(139,92,246,0.9) 50%,
        rgba(200,165,80,0.8) 75%,
        transparent 100%
      );
      z-index: -2;
      animation: rotateBorder 3s linear infinite;
    }
    .demo-btn-glow::after {
      content: '';
      position: absolute;
      inset: 2px;
      border-radius: 100px;
      background: rgba(10,8,16,0.95);
      z-index: -1;
    }
    @property --btn-angle {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: false;
    }
    @keyframes rotateBorder {
      to { --btn-angle: 360deg; }
    }
    .demo-btn-glow:hover {
      transform: scale(1.05);
      box-shadow: 0 0 20px rgba(200,165,80,0.4);
    }
    .hero-sub {
      font-size: 1.12rem; color: #64648c; line-height: 1.65;
      max-width: 500px; margin: 0 auto;
      font-family: 'Inter', var(--sans), sans-serif; font-weight: 400;
      animation: fadeUp 0.6s ease 0.2s both;
    }

    /* ── Trust bar ─────────────────────────────── */
    .trust-bar {
      display: flex; justify-content: center; gap: 48px;
      padding: 48px 24px 0;
      max-width: 660px; margin: 0 auto;
      animation: fadeUp 0.6s ease 0.3s both;
    }
    .trust-item { text-align: center; }
    .trust-num {
      font-family: 'Sora', var(--sans), sans-serif; font-size: 1.5rem; font-weight: 800;
      color: #1a1a2e;
    }
    .trust-label {
      font-family: 'IBM Plex Mono', var(--mono), monospace; font-size: 0.62rem; color: #64648c;
      text-transform: uppercase; letter-spacing: 0.12em; margin-top: 3px;
    }

    /* ── Hero form card (Dark + Gold) ─────────────────────────── */
    .hero-form-card {
      background: linear-gradient(150deg, rgba(18,14,28,0.92) 0%, rgba(8,6,14,0.97) 100%);
      backdrop-filter: blur(24px) saturate(130%);
      -webkit-backdrop-filter: blur(24px) saturate(130%);
      border: 1px solid rgba(200,165,80,0.25);
      border-top: 1px solid rgba(220,185,100,0.6);
      border-left: 1px solid rgba(200,165,80,0.4);
      border-radius: 18px 18px 0 0;
      border-bottom: none;
      padding: 30px 34px;
      box-shadow:
        inset 0 1px 1px rgba(220,185,100,0.15),
        0 14px 40px rgba(0,0,0,0.4),
        0 0 80px rgba(200,165,80,0.08);
      text-align: left;
      animation: fadeUp .55s ease both;
      max-width: 100%; margin: 0 auto;
      position: relative; z-index: 10;
      transition: transform .3s, box-shadow .3s;
    }
    .hero-form-card-bottom {
      background: linear-gradient(150deg, rgba(14,10,22,0.93) 0%, rgba(6,4,10,0.97) 100%);
      backdrop-filter: blur(24px) saturate(130%);
      -webkit-backdrop-filter: blur(24px) saturate(130%);
      border: 1px solid rgba(200,165,80,0.25);
      border-left: 1px solid rgba(200,165,80,0.4);
      border-top: none;
      border-radius: 0 0 18px 18px;
      padding: 16px 34px 24px;
      box-shadow:
        0 20px 50px rgba(0,0,0,0.4);
      max-width: 100%; margin: 0 auto;
      position: relative; z-index: 1;
    }
    .hero-form-card:hover {
      transform: translateY(-2px);
      box-shadow:
        0 2px 0 rgba(200,165,80,0.08),
        0 20px 60px rgba(0,0,0,0.35),
        0 0 120px rgba(200,165,80,0.1);
    }

    /* Revert inputs and labels inside the dark hero card */
    .hero-form-card label { color: #ffffff; }
    .hero-form-card input[type="text"], .hero-form-card select, .hero-form-card .cs-selected {
      background: rgba(0,0,0,0.7); border: 1px solid rgba(200,165,80,0.15);
      border-radius: 10px; color: #e8ecf5; box-shadow: none;
    }
    .hero-form-card input:focus, .hero-form-card select:focus, .hero-form-card .custom-select.open .cs-selected {
      background: rgba(0,0,0,0.7); border-color: rgba(220,185,100,0.5);
      box-shadow: 0 0 0 3px rgba(200,165,80,.1), 0 0 20px rgba(200,165,80,.06);
    }
    .hero-form-card input::placeholder { color: #7a7a8a; }
    /* Animated gold glow border */
    .hero-form-card::before {
      content: '';
      position: absolute; inset: -1px;
      border-radius: 19px 19px 0 0;
      background: linear-gradient(135deg, rgba(220,185,100,0.4) 0%, transparent 40%, transparent 60%, rgba(200,165,80,0.3) 100%);
      z-index: -1;
      opacity: 0;
      transition: opacity .4s;
    }
    .hero-form-card:hover::before { opacity: 1; }
    @keyframes borderGlow {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }
    /* Gold glow behind card */
    .hero-form-card::after {
      content: '';
      position: absolute; inset: -20px;
      border-radius: 30px;
      background: radial-gradient(ellipse at 50% 0%, rgba(200,165,80,0.12) 0%, transparent 70%);
      z-index: -2;
      pointer-events: none;
    }
    .hero-form-label {
      font-family: 'IBM Plex Mono', var(--mono), monospace; font-size: 0.63rem; color: #ffffff;
      text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 20px;
      display: flex; align-items: center; gap: 8px; font-weight: 500;
    }
    .hero-form-label::before { content:''; width:18px; height:1px; background:rgba(200,165,80,0.5); }


    /* ── Video preview ──────────────────────────── */
    .yt-preview {
      display: flex; align-items: center; gap: 12px;
      background: linear-gradient(160deg, rgba(14,12,20,0.96) 0%, rgba(6,5,10,0.98) 100%);
      border: 1px solid rgba(200,165,80,0.2);
      border-bottom: none;
      border-radius: 14px 14px 0 0;
      position: absolute; bottom: 100%; left: 50%;
      transform: translateX(-50%);
      width: 90%; box-sizing: border-box;
      max-height: 0; overflow: hidden; opacity: 0;
      padding: 0 20px;
      transition: max-height 0.45s ease-out, opacity 0.3s ease-out 0.05s, padding 0.35s ease-out;
      z-index: 1;
    }
    .yt-preview.visible {
      max-height: 80px; opacity: 1;
      padding: 14px 20px;
    }
    .yt-preview-thumb {
      width: 80px; height: 45px; border-radius: 6px;
      object-fit: cover; flex-shrink: 0;
      border: 1px solid rgba(200,165,80,0.2);
    }
    .yt-preview-info { flex: 1; min-width: 0; }
    .yt-preview-title {
      font-size: 0.82rem; font-weight: 600; color: #f1f5f9;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      margin-bottom: 3px;
    }
    .yt-preview-channel {
      font-family: var(--mono); font-size: 0.68rem; color: #94a3b8;
    }
    .yt-preview-ok {
      width: 20px; height: 20px; border-radius: 50%;
      background: rgba(34,197,94,0.15); border: 1px solid rgba(34,197,94,0.3);
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    /* ── Mode selector (sipario dentro il box) ──────── */
    .mode-selector {
      background: linear-gradient(160deg, rgba(14,12,20,0.96) 0%, rgba(6,5,10,0.98) 100%);
      border-left: 1px solid rgba(200,165,80,0.2);
      border-right: 1px solid rgba(200,165,80,0.2);
      border-top: none; border-bottom: none;
      border-radius: 0;
      max-height: 0; overflow: hidden; opacity: 0;
      padding: 0 12px; margin: 0 auto;
      width: 90%; box-sizing: border-box;
      transition: max-height 0.45s ease-out 0.1s, opacity 0.35s ease-out 0.15s, padding 0.4s ease-out 0.1s, margin 0.35s ease-out 0.1s;
    }
    .mode-selector.visible {
      max-height: 210px; opacity: 1;
      padding: 10px 12px; margin: 0 auto;
    }
    .mode-options {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .mode-option:nth-child(5) { grid-column: 1 / -1; }
    .mode-option {
      min-width: 0;
      display: flex; align-items: center; gap: 8px;
      padding: 10px 12px;
      background: rgba(200,165,80,0.05);
      border: 1px solid rgba(200,165,80,0.12);
      border-radius: 10px; cursor: pointer;
      transition: all 0.25s;
    }
    .mode-option:hover { background: rgba(200,165,80,0.1); border-color: rgba(200,165,80,0.25); }
    .mode-option.active {
      background: rgba(200,165,80,0.15);
      border-color: rgba(200,165,80,0.4);
    }
    .mode-option input[type="radio"] { display: none; }
    .mode-dot {
      width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
      border: 2px solid rgba(200,165,80,0.25);
      transition: all 0.2s;
    }
    .mode-option.active .mode-dot {
      background: #c8a550; border-color: #c8a550;
      box-shadow: 0 0 8px rgba(200,165,80,0.4);
    }
    .mode-icon { color: #94a3b8; flex-shrink: 0; transition: color 0.2s; }
    .mode-option.active .mode-icon { color: #d4b96a; }
    .mode-text {
      font-size: 0.74rem; color: #94a3b8; font-weight: 500; transition: color 0.2s;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
    }
    .mode-option.active .mode-text { color: #d4b96a; }

    /* ── Summary report card (legacy inline, nascosto) ─── */
    .summary-report-card { display: none !important; }

    /* ── Summary Modal ────────────────────────────── */
    #summary-modal-overlay {
      display: none; position: fixed; inset: 0; z-index: 9999;
      background: rgba(255,255,255,0.82);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      align-items: flex-start; justify-content: center;
      padding: 40px 24px;
      overflow-y: auto;
    }
    #summary-modal-overlay.open { display: flex; }

    .summary-modal-header {
      text-align: center; margin-bottom: 24px;
    }
    .summary-modal-icon {
      font-size: 2.5rem; margin-bottom: 8px;
    }
    .summary-modal-title {
      font-family: var(--sans); font-size: 1.4rem; font-weight: 700;
      color: #1a1a2e; margin: 0;
    }
    .summary-modal-body {
      background: linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.3) 100%);
      backdrop-filter: blur(24px) saturate(200%);
      -webkit-backdrop-filter: blur(24px) saturate(200%);
      border: 1px solid rgba(255,255,255,0.6);
      border-radius: 16px;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4), 0 8px 20px -6px rgba(0,0,0,0.08);
      padding: 24px 28px;
      color: #334155; font-size: 0.9rem; line-height: 1.8;
      max-height: 50vh; overflow-y: auto;
    }
    .summary-modal-body h2 { font-size: 1.15rem; color: #1a1a2e; margin: 0 0 14px; font-weight: 700; }
    .summary-modal-body h3 { font-size: 1rem; color: #a07830; margin: 16px 0 8px; font-weight: 600; }
    .summary-modal-body ul { padding-left: 20px; margin: 8px 0; }
    .summary-modal-body li { margin-bottom: 6px; }
    .summary-modal-body p { margin: 8px 0; }
    .summary-modal-body strong { color: #1a1a2e; }

    .summary-modal-audio-btn {
      width: 100%; display: flex; align-items: center; gap: 12px;
      padding: 14px 18px; margin-top: 16px;
      background: linear-gradient(135deg, rgba(160,120,48,0.08) 0%, rgba(200,165,80,0.05) 100%);
      border: 1px solid rgba(160,120,48,0.2);
      border-radius: 12px; cursor: pointer; transition: all 0.2s;
      color: #a07830; font-family: var(--sans); font-size: 0.88rem; font-weight: 600;
    }
    .summary-modal-audio-btn:hover { background: rgba(160,120,48,0.15); }

    @media (max-width: 768px) {
      .mode-option { padding: 9px 10px; }
      .mode-selector.visible { max-height: 260px; }
    }

    /* ── Credits badge ──────────────────────────── */
    .credits-badge {
      display: none; align-items: center; justify-content: center; gap: 6px;
      font-family: 'IBM Plex Mono', var(--mono), monospace; font-size: 0.7rem; color: #7b8aab;
      margin-top: 12px; text-align: center;
    }
    .credits-badge.visible { display: flex; }
    .credits-badge.low { color: #f97316; }
    .credits-badge.empty { color: #ef4444; }

    /* ── Upgrade modal ──────────────────────────── */
    #upgrade-modal-overlay {
      display: none; position: fixed; inset: 0; z-index: 9999;
      background: rgba(0,0,0,0.85); backdrop-filter: blur(8px);
      align-items: center; justify-content: center; padding: 20px;
    }
    #upgrade-modal-overlay.open { display: flex; }
    .upgrade-modal {
      background: linear-gradient(160deg, rgba(28,18,45,0.99) 0%, rgba(10,8,16,0.99) 100%);
      border: 1px solid rgba(200,165,80,0.25);
      border-top: 1px solid rgba(200,165,80,0.5);
      box-shadow: 0 0 60px rgba(200,165,80,0.2), 0 24px 48px rgba(0,0,0,0.7);
      border-radius: 20px; padding: 36px 32px; max-width: 480px; width: 100%;
      position: relative; animation: fadeUp .3s ease both;
    }
    .upgrade-modal-close {
      position: absolute; top: 16px; right: 16px;
      background: none; border: none; color: #64748b;
      font-size: 1.2rem; cursor: pointer; padding: 4px 8px;
      transition: color .2s;
    }
    .upgrade-modal-close:hover { color: #f1f5f9; }
    .upgrade-modal-icon {
      width: 48px; height: 48px; border-radius: 12px;
      background: rgba(200,165,80,0.1); border: 1px solid rgba(200,165,80,0.2);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem; margin-bottom: 16px;
    }
    .upgrade-modal-title {
      font-size: 1.3rem; font-weight: 800; color: #f1f5f9;
      letter-spacing: -0.03em; margin-bottom: 6px;
    }
    .upgrade-modal-sub {
      font-size: 0.85rem; color: #94a3b8; margin-bottom: 24px; line-height: 1.6;
    }
    .upgrade-plans {
      display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px;
    }
    .upgrade-plan {
      border: 1px solid rgba(200,165,80,0.2);
      border-radius: 12px; padding: 16px; cursor: pointer;
      transition: all .2s; background: rgba(200,165,80,0.04);
    }
    .upgrade-plan:hover { border-color: rgba(200,165,80,0.5); background: rgba(200,165,80,0.08); }
    .upgrade-plan.featured {
      border-color: rgba(200,165,80,0.5);
      background: rgba(200,165,80,0.08);
      position: relative;
    }
    .upgrade-plan-badge {
      position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
      background: linear-gradient(135deg, #c8a550, #a07830);
      color: #fff; font-size: 0.6rem; font-weight: 700;
      padding: 3px 10px; border-radius: 20px; letter-spacing: 0.08em;
      text-transform: uppercase; white-space: nowrap;
    }
    .upgrade-plan-name {
      font-weight: 700; font-size: 0.9rem; color: #f1f5f9; margin-bottom: 4px;
    }
    .upgrade-plan-price {
      font-family: var(--mono); font-size: 1.2rem; font-weight: 700;
      color: var(--accent); margin-bottom: 6px;
    }
    .upgrade-plan-price span { font-size: 0.7rem; color: #64748b; font-weight: 400; }
    .upgrade-plan-mins {
      font-size: 0.75rem; color: #94a3b8;
    }
    .upgrade-modal-cta {
      width: 100%; padding: 13px;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color: #000; font-weight: 800; font-size: 0.95rem;
      border: none; border-radius: 10px; cursor: pointer;
      transition: all .2s; box-shadow: 0 0 20px rgba(200,165,80,0.3);
    }
    .upgrade-modal-cta:hover { transform: translateY(-1px); box-shadow: 0 0 30px rgba(200,165,80,0.5); }
    .upgrade-modal-note {
      text-align: center; font-size: 0.72rem; color: #475569;
      margin-top: 12px; font-family: var(--mono);
    }
    /* ── How it works ───────────────────────────── */
    /* ── How it works (v2 style) ─────────────── */
    .how-section {
      padding: 90px 24px 70px;
      max-width: 1100px; margin: 0 auto;
      text-align: center;
    }
    .section-tag {
      font-family: 'IBM Plex Mono', var(--mono), monospace; font-size: 0.66rem; font-weight: 500;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: #a07830; margin-bottom: 14px;
      display: flex; align-items: center; justify-content: center; gap: 12px;
    }
    .section-tag::before, .section-tag::after {
      content: ''; width: 30px; height: 1px;
      background: linear-gradient(90deg, transparent, #a07830);
    }
    .section-tag::after { background: linear-gradient(90deg, #a07830, transparent); }

    .how-section h2 {
      font-family: 'Sora', var(--sans), sans-serif; font-size: 2.2rem; font-weight: 800;
      letter-spacing: -1px; margin-bottom: 12px; color: #1a1a2e;
    }
    .how-section h2 .grad {
      background: linear-gradient(135deg, #c8a550, #a07830);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }
    .how-sub { font-size: 0.95rem; color: #64648c; margin-bottom: 44px; }

    .steps-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
    }
    @media (max-width: 640px) {
      .steps-grid { grid-template-columns: 1fr; }
    }
    .step-card {
      background: linear-gradient(160deg, rgba(24,18,42,0.98) 0%, rgba(10,8,16,0.99) 100%);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 16px;
      padding: 36px 24px 30px;
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      position: relative; overflow: hidden;
      background-size: cover; background-position: center;
    }
    .steps-grid .step-card:nth-child(1) {
      background-image: linear-gradient(160deg, rgba(24,18,42,0.55) 0%, rgba(10,8,16,0.65) 100%), url('/static/step-1.webp');
    }
    .steps-grid .step-card:nth-child(2) {
      background-image: linear-gradient(160deg, rgba(24,18,42,0.55) 0%, rgba(10,8,16,0.65) 100%), url('/static/step-2.webp');
    }
    .steps-grid .step-card:nth-child(3) {
      background-image: linear-gradient(160deg, rgba(24,18,42,0.55) 0%, rgba(10,8,16,0.65) 100%), url('/static/step-3.webp');
    }
    .step-card .step-bg-num {
      position: absolute;
      top: 50%; right: -8px;
      transform: translateY(-50%);
      font-family: 'Sora', var(--sans), sans-serif;
      font-size: 11rem; font-weight: 900;
      color: rgba(200,165,80,0.22);
      line-height: 1;
      pointer-events: none; user-select: none;
      transition: color 0.3s;
    }
    .step-card:hover .step-bg-num { color: rgba(200,165,80,0.30); }
    .step-card::after {
      content: ''; position: absolute; top: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, #c8a550, #a07830);
      opacity: 0; transition: opacity 0.3s;
    }
    .step-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 50px rgba(0,0,0,0.2), 0 0 30px rgba(200,165,80,0.06);
    }
    .step-card:hover::after { opacity: 1; }

    .step-icon-wrap {
      width: 52px; height: 52px; border-radius: 14px;
      background: rgba(200,165,80,0.08);
      border: 1px solid rgba(200,165,80,0.18);
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 18px;
      transition: all 0.3s;
    }
    .step-card:hover .step-icon-wrap {
      background: rgba(200,165,80,0.15);
      box-shadow: 0 0 20px rgba(200,165,80,0.15);
    }
    .step-icon-wrap svg { color: #c8a550; }
    .step-card h3 {
      font-family: 'Sora', var(--sans), sans-serif; font-size: 1.15rem; font-weight: 700;
      color: #ffffff; margin-bottom: 8px;
    }
    .step-card p { font-size: 0.88rem; color: #ffffff; line-height: 1.55; }
    .step-number {
      font-family: 'IBM Plex Mono', var(--mono), monospace; font-size: 0.6rem;
      color: #c8a550; opacity: 0.5;
      margin-bottom: 14px; letter-spacing: 0.12em;
    }

    /* ── Languages ──────────────────────────────── */
    .lang-section {
      padding: 30px 24px 70px;
      max-width: 1100px; margin: 0 auto;
      text-align: center;
    }
    .lang-section h2 {
      font-family: 'Sora', var(--sans), sans-serif; font-size: 2rem; font-weight: 800;
      letter-spacing: -0.5px; margin-bottom: 8px; color: #1a1a2e;
    }
    .lang-section h2 .grad {
      background: linear-gradient(135deg, #c8a550, #a07830);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }
    .lang-sub { font-size: 0.9rem; color: #64648c; margin-bottom: 30px; }
    .lang-grid {
      display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
      margin-top: 30px;
    }
    .lang-chip {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 9px 16px; border-radius: 10px;
      background: linear-gradient(160deg, rgba(24,18,42,0.98) 0%, rgba(10,8,16,0.99) 100%);
      border: 1px solid rgba(255,255,255,0.06);
      font-family: 'Inter', var(--sans), sans-serif; font-size: 0.8rem;
      color: #e8ecf5;
      transition: all 0.2s;
    }
    .lang-chip:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(0,0,0,0.12);
      border-color: rgba(200,165,80,0.35);
    }
    .lang-chip img { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; }
    .lang-more {
      border-color: rgba(200,165,80,0.35); color: var(--accent);
      cursor: pointer;
    }

    /* ── Pricing ────────────────────────────────── */
    /* ── Pricing (v2 style) ──────────────────── */
    .pricing-section {
      max-width: 1100px; margin: 0 auto;
      padding: 0 24px 70px;
      text-align: center;
    }
    .pricing-section h2 {
      font-family: 'Sora', var(--sans), sans-serif; font-size: 2.2rem; font-weight: 800;
      letter-spacing: -1px; margin-bottom: 8px; color: #1a1a2e;
    }
    .pricing-section h2 .grad {
      background: linear-gradient(135deg, #c8a550, #a07830);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }
    .pricing-sub {
      font-size: 0.92rem; color: #64648c; margin-bottom: 36px;
    }

    /* Free row — full width */
    .pricing-free-row { margin-bottom: 18px; }
    .pricing-free-card {
      display: flex; align-items: center; justify-content: space-between;
      gap: 24px; flex-wrap: wrap;
    }
    .pricing-free-left { text-align: left; }
    .pricing-free-features { flex: 1; }
    .pricing-free-cta { flex-shrink: 0; }

    .p-card {
      background: linear-gradient(160deg, rgba(24,18,42,0.98) 0%, rgba(10,8,16,0.99) 100%);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 16px;
      padding: 28px 28px 24px;
      text-align: left;
      transition: transform 0.3s, box-shadow 0.3s;
      position: relative;
      display: flex;
      flex-direction: column;
    }
    .p-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 50px rgba(0,0,0,0.18);
    }
    .p-card.featured {
      border-color: rgba(200,165,80,0.45);
      border-top: 2px solid rgba(200,165,80,0.7);
      box-shadow: 0 2px 0 rgba(200,165,80,0.2), 0 8px 50px rgba(200,165,80,0.15), 0 24px 60px rgba(0,0,0,0.4);
    }
    .p-badge {
      position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
      font-family: 'IBM Plex Mono', var(--mono), monospace; font-size: 0.68rem; font-weight: 600;
      letter-spacing: 1.5px; text-transform: uppercase;
      padding: 5px 16px; border-radius: 100px;
      background: linear-gradient(135deg, #c8a550, #a07830);
      color: #fff; box-shadow: 0 0 20px rgba(200,165,80,0.4);
      white-space: nowrap;
    }
    .p-plan {
      font-family: 'IBM Plex Mono', var(--mono), monospace; font-size: 0.68rem; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.12em;
      color: #94a3b8; margin-bottom: 6px;
    }
    .p-price {
      font-family: 'Sora', var(--sans), sans-serif; font-size: 2rem; font-weight: 800;
      color: #fff; margin-bottom: 4px;
    }
    .p-price span { font-size: 0.85rem; color: #94a3b8; font-weight: 500; }
    .p-desc {
      font-size: 0.82rem; color: #94a3b8; margin-bottom: 18px; line-height: 1.4;
    }
    .p-features {
      list-style: none; margin-bottom: 20px; flex: 1;
    }
    .p-features li {
      font-family: 'Inter', var(--sans), sans-serif; font-size: 0.82rem; color: #e8ecf5;
      padding: 5px 0; display: flex; align-items: center; gap: 8px;
    }
    .p-features li::before {
      content: '✓'; color: #22c55e; font-weight: 700; font-size: 0.75rem;
      width: 18px; height: 18px; border-radius: 50%;
      background: rgba(34,197,94,0.1); display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .p-features li.disabled { color: #94a3b8; opacity: 0.45; }
    .p-features li.disabled::before { content: '—'; color: #94a3b8; background: rgba(107,122,153,0.1); }

    .p-btn {
      width: 100%; border: none; border-radius: 10px;
      font-family: 'Inter', var(--sans), sans-serif; font-size: 0.92rem; font-weight: 700;
      padding: 13px; cursor: pointer; transition: all 0.25s;
      text-align: center;
    }
    .p-btn-accent {
      background: linear-gradient(135deg, #c8a550, #a07830);
      color: #fff; box-shadow: 0 0 20px rgba(200,165,80,0.2);
    }
    .p-btn-accent:hover { box-shadow: 0 0 35px rgba(200,165,80,0.35); transform: translateY(-1px); }
    .p-btn-outline {
      background: rgba(200,165,80,0.08); color: #c8a550;
      border: 1px solid rgba(200,165,80,0.25);
    }
    .p-btn-outline:hover { background: rgba(200,165,80,0.15); }

    /* Grid */
    .pricing-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
      margin-top: 18px;
    }
    @media (max-width: 768px) {
      .pricing-grid { grid-template-columns: 1fr; }
      .pricing-free-card { flex-direction: column; text-align: center; }
      .pricing-free-left { text-align: center; }
    }

    /* Beta Banner */
    /* ── CTA ────────────────────────────────────── */
    .cta-section {
      max-width: 820px; margin: 80px auto 0; padding: 0 24px 100px;
      text-align: center;
    }
    .cta-card {
      background:linear-gradient(160deg, rgba(28,18,45,0.98) 0%, rgba(10,8,16,0.99) 100%);
      border:1px solid rgba(200,165,80,0.18); border-top: 1px solid rgba(200,165,80,0.45);
      border-radius: 20px; padding: 56px 40px;
      box-shadow: 0 2px 0 rgba(200,165,80,0.18), 0 8px 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04);
      position: relative; overflow: hidden;
    }
    .cta-card::before {
      content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
      background: radial-gradient(ellipse 40% 40% at 50% 50%, rgba(200,165,80,0.05), transparent);
      animation: rotateSlow 20s linear infinite; pointer-events: none;
    }
    @keyframes rotateSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    .cta-title {
      font-family: var(--sans); font-size: clamp(1.4rem, 3vw, 2rem);
      font-weight: 800; color: #c8a550; letter-spacing: -0.5px; margin-bottom: 12px;
    }
    .cta-sub { font-family: var(--sans); font-size: 0.95rem; color: #f0f0f0; margin-bottom: 28px; }
    .cta-btn {
      display: inline-flex; align-items: center; gap: 8px;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color: #000; font-family: var(--sans); font-size: 0.9rem; font-weight: 700;
      padding: 13px 28px; border-radius: 10px; border: none; cursor: pointer;
      transition: opacity .2s; text-decoration: none;
    }
    .cta-btn:hover { opacity: 0.85; }

    /* ── Footer ─────────────────────────────────── */
    .site-footer {
      max-width: 820px; margin: 0 auto;
      padding: 48px 24px 40px;
      border-top: 1px solid var(--border);
      position: relative; z-index: 1;
    }
    .footer-top {
      display: flex; align-items: flex-start; justify-content: space-between;
      gap: 40px; margin-bottom: 40px; flex-wrap: wrap;
    }
    .footer-brand { max-width: 240px; }
    .footer-brand-logo {
      display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
    }
    .footer-brand-logo img { height: 28px; width: auto; filter: drop-shadow(0 0 6px rgba(124,92,255,0.5)); }
    .footer-brand-name { font-family: var(--sans); font-size: 1rem; font-weight: 800; color: #000; }
    .footer-brand-desc { font-family: var(--sans); font-size: 0.78rem; color: #333; line-height: 1.6; }
    .footer-links-col h4 {
      font-family: var(--mono); font-size: 0.6rem; color: var(--accent);
      text-transform: uppercase; letter-spacing: 2px; margin-bottom: 14px;
    }
    .footer-links-col a {
      display: block; font-family: var(--sans); font-size: 0.82rem;
      color: #333; text-decoration: none; margin-bottom: 8px;
      transition: color .2s;
    }
    .footer-links-col a:hover { color: #000; }
    .footer-cta-mini {
      display: inline-flex; align-items: center; gap: 8px;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color: #000; font-family: var(--sans); font-size: 0.82rem; font-weight: 700;
      padding: 10px 20px; border-radius: 8px; text-decoration: none;
      box-shadow: 0 0 16px rgba(200,165,80,0.25);
    }
    .footer-bottom {
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 10px;
      font-family: var(--mono); font-size: 0.62rem; color: #000;
      padding-top: 24px; border-top: 1px solid rgba(0,0,0,0.15);
    }
    .footer-bottom a { color: #000; text-decoration: none; transition: color .2s; }
    .footer-bottom a:hover { color: var(--accent); }


    /* ── Enhanced btn glow v2 ──────────────────────── */



    /* ── Voice gender toggle (v2 style) ──────────── */
    .form-row-inline {
      display: flex; gap: 12px; margin-top: 14px;
    }
    .voice-toggle {
      display: flex; gap: 3px;
      background: rgba(0,0,0,0.4); border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.06); padding: 3px;
      margin-top: 6px;
    }
    .voice-btn {
      display: flex; align-items: center; gap: 6px;
      padding: 9px 15px; border: none; border-radius: 8px;
      background: transparent; color: #94a3b8;
      font-family: 'IBM Plex Mono', var(--mono), monospace; font-size: 0.74rem; font-weight: 500;
      cursor: pointer; transition: all 0.25s; white-space: nowrap;
    }
    .voice-btn.active {
      background: rgba(200,165,80,0.15); color: #d4b96a;
      box-shadow: 0 0 12px rgba(200,165,80,0.1);
    }
    .voice-btn:not(.active):hover { color: #cbd5e1; }
    .voice-btn svg { flex-shrink: 0; }

    /* ── Desktop: assicura layout corretto ──────────── */
    @media (min-width: 769px) {
      .navbar-center-links { display: flex !important; }
      #navbar-right-slot { display: flex !important; }
      .hamburger { display: none !important; }
      .mobile-menu { display: none !important; visibility: hidden !important; }
    }


    /* ── Mobile navbar ──────────────────────────────── */
    .hamburger {
      display: none;
      flex-direction: column; justify-content: center; gap: 5px;
      width: 36px; height: 36px; cursor: pointer;
      background: none; border: none; padding: 4px; z-index: 9996;
    }
    .hamburger span {
      display: block; width: 22px; height: 2px;
      background: var(--text); border-radius: 2px;
      transition: all .3s ease;
    }
    .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .mobile-menu {
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
      position: fixed;
      top: 60px; left: 0; right: 0;
      height: calc(100vh - 60px);
      background: linear-gradient(160deg, #1a0a2e 0%, #0a0514 100%);
      z-index: 9990;
      display: flex;
      flex-direction: column;
      padding: 40px 32px;
      border-top: 2px solid rgba(200,165,80,0.4);
      box-shadow: inset 0 1px 0 rgba(200,165,80,0.1);
      overflow-y: auto;
      transition: opacity .4s cubic-bezier(0.16,1,0.3,1), visibility .4s cubic-bezier(0.16,1,0.3,1);
    }
    .mobile-menu.open {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
    }
    @keyframes slideDown {
      from { opacity: 0; transform: translateY(-10px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .mobile-menu a {
      font-family: var(--sans); font-size: 1.25rem; font-weight: 600;
      color: rgba(255,255,255,0.85); text-decoration: none;
      padding: 18px 0; border-bottom: 1px solid rgba(200,165,80,0.1);
      display: block; transition: color .2s, padding-left .2s;
    }
    .mobile-menu a:hover { color: var(--accent); padding-left: 6px; }
    .mobile-menu-auth { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
    .mobile-menu-email { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); padding: 8px 0; }
    .mobile-menu-btn {
      padding: 12px 20px; border-radius: 8px; font-family: var(--sans);
      font-size: 0.9rem; font-weight: 600; cursor: pointer; text-align: center; transition: opacity .2s;
    }
    .mobile-menu-btn.accent { background: linear-gradient(135deg, var(--accent), var(--accent2)); border: none; color: #000; }
    .mobile-menu-btn.ghost { background: none; border: 1px solid var(--border2); color: var(--muted); }
    .mobile-menu-btn:hover { opacity: 0.85; }

    @media (max-width: 768px) {
      /* Layout mobile */
      .hamburger { display: flex !important; }
      .navbar-center-links { display: none !important; }
      #navbar-right-slot { display: none !important; }
      .steps-grid { grid-template-columns: 1fr !important; }
      .steps-grid .step-card { min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end; }
      .mobile-menu { top: 60px; height: calc(100vh - 60px); }
      .navbar { padding: 0 12px; }

      /* Hero form card mobile */
      .hero-form-card { padding: 20px 16px; border-radius: 14px 14px 0 0; }
      .hero-form-card-bottom { padding: 12px 16px 18px; border-radius: 0 0 14px 14px; }
      .hero h1 { font-size: 1.6rem !important; }
      .hero .hero-sub { font-size: 0.9rem !important; }

      /* Trust bar mobile */
      .trust-bar { gap: 16px; flex-wrap: wrap; justify-content: center; }
      .trust-item { min-width: 70px; }
      .trust-num { font-size: 1rem; }
      .trust-label { font-size: 0.6rem; }

      /* Input e bottoni mobile */
      input[type="text"], select { font-size: 0.82rem; padding: 12px 14px; }
      .btn-translate { font-size: 0.95rem; padding: 14px 20px; }
      .credits-badge { font-size: 0.65rem; }

      /* URL input icons */
      .url-input-icons { gap: 4px; }
      .url-input-icons svg { width: 16px; height: 16px; }

      /* Voice toggle su mobile — bottoni uguali */
      .voice-toggle {
        width: 100%;
      }
      .voice-btn {
        flex: 1;
        justify-content: center;
        padding: 9px 10px;
        font-size: 0.74rem;
      }
    }

    /* ══════════════════════════════════════════════════
       TEMA CHIARO GLOBALE (desktop + mobile)
       ══════════════════════════════════════════════════ */
    body {
      background: #f0f0f0 !important;
    }
    body::before {
      content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
      background:
        radial-gradient(ellipse 60% 55% at -5% 0%,   rgba(200,165,80,0.12) 0%, transparent 65%),
        radial-gradient(ellipse 55% 50% at 105% 0%,  rgba(160,120,48,0.10) 0%, transparent 60%),
        radial-gradient(ellipse 50% 45% at -5% 100%, rgba(200,165,80,0.08) 0%, transparent 60%),
        radial-gradient(ellipse 55% 50% at 105% 100%,rgba(160,120,48,0.10) 0%, transparent 60%),
        radial-gradient(ellipse 40% 35% at 50% 40%,  rgba(200,165,80,0.05) 0%, transparent 100%) !important;
      display: block !important;
    }
    body::after {
      content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
      background-image: radial-gradient(rgba(0,0,0,0.04) 1px, transparent 1px) !important;
      background-size: 32px 32px !important;
      display: block !important;
    }
    /* Navbar — chiara stile v2 */
    .navbar {
      background: rgba(255,255,255,0.88) !important;
      backdrop-filter: blur(20px) saturate(180%) !important;
      border-bottom: none !important;
      box-shadow: 0 1px 12px rgba(124,92,255,0.08), 0 4px 24px rgba(0,0,0,0.06) !important;
    }
    .navbar::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent 10%, #b89440, #c8a550, #d4b872, #b89440, transparent 90%);
      background-size: 200% 100%;
      animation: navLineSlide 6s linear infinite;
      opacity: 0.8;
    }
    @keyframes navLineSlide {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    .navbar-brand-text {
      color: #1a1a2e !important;
      background: linear-gradient(135deg, #1a1a2e 60%, #c8a550);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .navbar-logo-dot {
      background: linear-gradient(135deg, #c8a550, #a07830) !important;
    }
    .navbar-center-links a {
      color: rgba(26,26,46,0.85) !important;
      font-weight: 500 !important;
      position: relative;
    }
    .navbar-center-links a::after {
      content: '';
      position: absolute;
      bottom: -4px; left: 0; right: 0;
      height: 2px;
      background: #c8a550;
      border-radius: 1px;
      transform: scaleX(0);
      transition: transform 0.25s ease;
    }
    .navbar-center-links a:hover {
      color: #1a1a2e !important;
    }
    .navbar-center-links a:hover::after {
      transform: scaleX(1);
    }
    .hamburger span {
      background: #1a1a2e !important;
    }
    .nav-login-btn {
      color: #fff !important;
    }
    .ui-lang-btn {
      background: rgba(0,0,0,0.05) !important;
      border-color: rgba(0,0,0,0.1) !important;
      color: #1a1a2e !important;
    }
    .ui-lang-btn:hover {
      background: rgba(0,0,0,0.1) !important;
    }
    /* Testi hero — il gradient .grad è gestito dalla hero h1 .grad */
    .hero h1 {
      color: #1a1a2e !important;
      -webkit-text-fill-color: #1a1a2e !important;
    }
    .hero h1 .grad {
      background: linear-gradient(135deg, #c8a550 0%, #d4b872 50%, #a07830 100%) !important;
      background-size: 200% auto !important;
      -webkit-background-clip: text !important; background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
    }
    .hero-sub {
      color: #64648c !important;
    }
    .section-title, .section-sub {
      color: #1a1a1a !important;
    }
    .tagline {
      color: #555 !important;
    }
    /* Watch how it works */
    #watch-demo-btn {
      color: #fff !important;
      border-color: transparent !important;
    }
    /* Contatori */
    .counter-num {
      color: #6b21a8 !important;
    }
    .counter-label {
      color: #333 !important;
    }
    #hero-counters {
      background: rgba(107,33,168,0.1) !important;
      border-color: rgba(107,33,168,0.3) !important;
    }
    /* Mobile menu */
    .mobile-menu {
      background: #f0f0f0 !important;
    }
    .mobile-menu a {
      color: #1a1a1a !important;
      border-bottom-color: rgba(0,0,0,0.08) !important;
    }
    /* Footer — tutto nero */
    .site-footer,
    .site-footer *,
    .site-footer a,
    .site-footer p,
    .site-footer span,
    .site-footer div,
    .site-footer h4,
    .site-footer li {
      color: #1a1a1a !important;
    }
    .site-footer {
      border-top-color: rgba(0,0,0,0.15) !important;
    }
    .footer-brand-desc {
      color: #444 !important;
    }
    .footer-links-col h4 {
      color: #6b21a8 !important;
    }
    .footer-links-col a {
      color: #333 !important;
    }
    .footer-links-col a:hover {
      color: #6b21a8 !important;
    }
    .footer-bottom {
      border-top-color: rgba(0,0,0,0.15) !important;
      color: #1a1a1a !important;
    }
    .footer-bottom a {
      color: #1a1a1a !important;
    }

    /* ── PWA Install Banner ─────────────────────────── */
    .pwa-banner {
      display: none;
      position: fixed;
      bottom: 0; left: 0; right: 0;
      z-index: 99999;
      background: linear-gradient(135deg, #1a0a2e 0%, #0d0d0d 100%);
      border-top: 2px solid rgba(200,165,80,0.5);
      box-shadow: 0 -4px 30px rgba(200,165,80,0.2);
      padding: 14px 20px;
      align-items: center;
      gap: 14px;
      animation: slideUp .35s ease;
    }
    .pwa-banner.show { display: flex; }
    @keyframes slideUp {
      from { transform: translateY(100%); opacity: 0; }
      to   { transform: translateY(0);    opacity: 1; }
    }
    .pwa-banner-icon {
      width: 48px; height: 48px; border-radius: 12px;
      overflow: hidden; flex-shrink: 0;
      box-shadow: 0 0 12px rgba(200,165,80,0.4);
    }
    .pwa-banner-icon img { width: 100%; height: 100%; object-fit: cover; }
    .pwa-banner-text { flex: 1; }
    .pwa-banner-title {
      font-family: var(--sans); font-size: 0.95rem; font-weight: 700;
      color: #fff; margin-bottom: 2px;
    }
    .pwa-banner-sub {
      font-family: var(--sans); font-size: 0.75rem;
      color: rgba(255,255,255,0.5);
      display: flex; align-items: center; gap: 5px;
    }
    .pwa-banner-android {
      /* Android logo SVG inline */
      display: inline-flex; align-items: center; gap: 3px;
      color: #a4c639;
      font-size: 0.72rem; font-weight: 600;
    }
    .pwa-banner-install {
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      border: none; border-radius: 10px;
      color: #000; font-family: var(--sans); font-size: 0.85rem; font-weight: 700;
      padding: 10px 18px; cursor: pointer; flex-shrink: 0;
      box-shadow: 0 0 16px rgba(200,165,80,0.4);
      transition: opacity .2s, transform .1s;
    }
    .pwa-banner-install:active { opacity: 0.85; transform: scale(0.97); }
    .pwa-banner-close {
      background: none; border: none; color: rgba(255,255,255,0.35);
      font-size: 1.2rem; cursor: pointer; padding: 4px; flex-shrink: 0;
      line-height: 1;
    }
    .pwa-banner-close:hover { color: rgba(255,255,255,0.7); }

    /* iOS banner (diverso) */
    .pwa-ios-banner {
      display: none;
      position: fixed;
      bottom: 0; left: 0; right: 0;
      z-index: 99999;
      background: linear-gradient(135deg, #1a0a2e 0%, #0d0d0d 100%);
      border-top: 2px solid rgba(200,165,80,0.5);
      box-shadow: 0 -4px 30px rgba(200,165,80,0.2);
      padding: 16px 20px 24px;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      text-align: center;
      animation: slideUp .35s ease;
    }
    .pwa-ios-banner.show { display: flex; }
    .pwa-ios-text {
      font-family: var(--sans); font-size: 0.85rem; color: rgba(255,255,255,0.75);
      line-height: 1.5;
    }
    .pwa-ios-text strong { color: #fff; }
    .pwa-ios-arrow {
      position: absolute; bottom: -10px; left: 50%;
      transform: translateX(-50%);
      width: 0; height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 10px solid rgba(200,165,80,0.5);
    }
    .pwa-ios-close {
      position: absolute; top: 12px; right: 16px;
      background: none; border: none; color: rgba(255,255,255,0.35);
      font-size: 1.2rem; cursor: pointer;
    }

    /* ── Download App Section ───────────────────────── */
    .download-section {
      max-width: 820px; margin: 80px auto 0; padding: 0 24px;
      text-align: center;
    }
    .download-card {
      background: linear-gradient(160deg, rgba(28,18,45,0.98) 0%, rgba(10,8,16,0.99) 100%);
      border: 1px solid rgba(200,165,80,0.18);
      border-top: 1px solid rgba(200,165,80,0.4);
      border-radius: 20px; padding: 48px 40px;
      box-shadow: 0 2px 0 rgba(200,165,80,0.12), 0 8px 32px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.03);
      position: relative; overflow: hidden;
    }
    .download-card::before {
      content: ''; position: absolute; top: -60%; left: -20%;
      width: 140%; height: 140%;
      background: radial-gradient(ellipse 50% 40% at 50% 0%, rgba(200,165,80,0.07), transparent);
      pointer-events: none;
    }
    .download-title {
      font-family: var(--sans); font-size: clamp(1.5rem, 3vw, 2.2rem);
      font-weight: 800; color: var(--text); letter-spacing: -0.5px;
      margin-bottom: 10px;
    }
    .download-title span {
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }
    .download-sub {
      font-family: var(--sans); font-size: 0.95rem; color: var(--muted);
      margin-bottom: 40px; line-height: 1.6;
    }
    .download-platforms {
      display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
      max-width: 560px; margin: 0 auto;
    }
    .download-platform {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 14px; padding: 24px 20px;
      display: flex; flex-direction: column; align-items: center; gap: 12px;
      transition: border-color .3s, box-shadow .3s, transform .3s;
    }
    .download-platform:hover {
      border-color: rgba(200,165,80,0.35);
      box-shadow: 0 0 24px rgba(200,165,80,0.1);
      transform: translateY(-3px);
    }
    .download-platform-icon {
      width: 52px; height: 52px; border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
    }
    .download-platform-icon.android { background: rgba(164,198,57,0.12); }
    .download-platform-icon.ios     { background: rgba(255,255,255,0.06); }
    .download-platform-name {
      font-family: var(--sans); font-size: 1rem; font-weight: 700; color: var(--text);
    }
    .download-steps {
      list-style: none; text-align: left; width: 100%;
    }
    .download-steps li {
      font-family: var(--sans); font-size: 0.78rem; color: var(--muted);
      padding: 5px 0; display: flex; align-items: flex-start; gap: 8px; line-height: 1.4;
    }
    .download-steps li::before {
      content: attr(data-step);
      font-family: var(--mono); font-size: 0.65rem; font-weight: 700;
      color: var(--accent); background: rgba(200,165,80,0.1);
      border: 1px solid rgba(200,165,80,0.2);
      border-radius: 50%; width: 18px; height: 18px; min-width: 18px;
      display: flex; align-items: center; justify-content: center;
      margin-top: 1px;
    }
    .download-badge {
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(200,165,80,0.1); border: 1px solid rgba(200,165,80,0.25);
      border-radius: 20px; padding: 4px 12px;
      font-family: var(--mono); font-size: 0.65rem; color: var(--accent);
      text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px;
    }
    @media (max-width: 520px) {
      .download-platforms { grid-template-columns: 1fr; }
      .download-card { padding: 32px 20px; }
    }

    /* ── History ────────────────────────────────── */
    .dash-history-wrap { margin-top: 32px; }
    .dash-history-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
    .dash-history-item {
      background: linear-gradient(160deg, rgba(28,18,45,0.98) 0%, rgba(10,8,16,0.99) 100%);
      border: 1px solid rgba(200,165,80,0.15);
      border-top: 1px solid rgba(200,165,80,0.35);
      border-radius: 12px; padding: 14px 18px;
      display: flex; align-items: center; gap: 14px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.4);
      transition: border-color .2s;
    }
    .dash-history-item:hover { border-color: rgba(200,165,80,0.3); }
    .dash-history-icon {
      width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
      background: rgba(200,165,80,0.12); border: 1px solid rgba(200,165,80,0.2);
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem; color: #f1f5f9;
    }
    .dash-history-info { flex: 1; min-width: 0; }
    .dash-history-url {
      font-family: var(--sans); font-size: 0.82rem; font-weight: 600;
      color: #f1f5f9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      max-width: 280px;
    }
    .dash-history-meta {
      font-family: var(--mono); font-size: 0.68rem; color: #94a3b8;
      margin-top: 3px; display: flex; gap: 12px; flex-wrap: wrap;
    }
    .dash-history-meta span { display: flex; align-items: center; gap: 4px; }
    .dash-history-lang {
      font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
      color: var(--accent); background: rgba(200,165,80,0.1);
      border: 1px solid rgba(200,165,80,0.2); border-radius: 6px;
      padding: 2px 8px; flex-shrink: 0;
    }

    .dash-history-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
    .dash-action-btn {
      display: flex; align-items: center; justify-content: center;
      width: 32px; height: 32px; border-radius: 8px;
      background: rgba(200,165,80,0.08); border: 1px solid rgba(200,165,80,0.18);
      color: #cbd5e1; text-decoration: none; cursor: pointer;
      transition: background .2s, color .2s, border-color .2s;
      flex-shrink: 0;
    }
    .dash-action-btn:hover { opacity: 0.8; }
    .dash-action-btn svg { width: 13px; height: 13px; }
    .dash-act-download { background: rgba(16,185,129,0.15); border-color: rgba(16,185,129,0.35); color: #10b981; }
    .dash-act-video { background: rgba(200,165,80,0.15); border-color: rgba(200,165,80,0.35); color: #c8a550; }
    .dash-act-transcript { background: rgba(200,165,80,0.15); border-color: rgba(200,165,80,0.35); color: #c8a550; }
    .dash-act-share { background: rgba(59,130,246,0.15); border-color: rgba(59,130,246,0.35); color: #3b82f6; }
    .dash-act-share.share-copied { background: rgba(34,197,94,0.15); color: #22c55e; border-color: rgba(34,197,94,0.35); }
    .dash-act-summary-text { background: rgba(6,182,212,0.15); border-color: rgba(6,182,212,0.35); color: #06b6d4; }
    .dash-act-summary-audio { background: rgba(236,72,153,0.15); border-color: rgba(236,72,153,0.35); color: #d4b872; }
    .dash-act-redub { background: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.35); color: #f59e0b; }
    .dash-act-delete { background: rgba(248,113,113,0.12); border-color: rgba(248,113,113,0.25); color: #f87171; }
    .dash-act-delete:hover { background: rgba(248,113,113,0.25) !important; border-color: rgba(248,113,113,0.45); }
    .dash-history-empty {
      font-family: var(--mono); font-size: 0.78rem; color: var(--muted);
      text-align: center; padding: 24px; opacity: 0.6;
    }
    .dash-history-loading {
      font-family: var(--mono); font-size: 0.75rem; color: var(--muted);
      text-align: center; padding: 16px;
    }

    /* ── Dashboard Mobile ──────────────────────────── */
    @media (max-width: 600px) {
      .dash-wrap { padding: 70px 14px 60px; }
      .dash-header { margin-bottom: 24px; }
      .dash-title { font-size: 1.2rem; }
      .dash-close-btn { padding: 6px 12px; font-size: 0.65rem; }

      .dash-stats { grid-template-columns: 1fr; gap: 10px; margin-bottom: 20px; }
      .dash-stat-card { padding: 14px 16px; }
      .dash-stat-value { font-size: 1.3rem; }

      .dash-user-card { padding: 16px; }
      .dash-user-row { flex-direction: column; align-items: flex-start; gap: 8px; }
      .dash-user-email-big { font-size: 0.95rem; }

      .dash-upgrade-cta { flex-direction: column; align-items: stretch; gap: 12px; text-align: center; }

      /* History items: titolo sopra, bottoni sotto */
      .dash-history-item {
        flex-wrap: wrap; padding: 12px 14px; gap: 10px;
      }
      .dash-history-icon { width: 30px; height: 30px; font-size: 0.85rem; }
      .dash-history-info { width: calc(100% - 44px); min-width: 0; }
      .dash-history-url { max-width: 100%; font-size: 0.78rem; }
      .dash-history-meta { font-size: 0.63rem; gap: 8px; }
      .dash-history-lang { font-size: 0.63rem; padding: 2px 6px; }
      .dash-history-actions {
        width: 100%; justify-content: flex-start; gap: 8px;
        padding-top: 6px; border-top: 1px solid rgba(200,165,80,0.1);
      }
      .dash-action-btn { width: 34px; height: 34px; }
    }

    /* ── Language Selector (Desktop) ─────────────────── */
    .ui-lang-selector {
      position: relative;
      display: flex;
      align-items: center;
    }
    .ui-lang-btn {
      display: flex;
      align-items: center;
      gap: 5px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 8px;
      padding: 6px 10px;
      cursor: pointer;
      transition: all 0.2s;
      color: var(--muted);
    }
    .ui-lang-btn:hover {
      background: rgba(255,255,255,0.1);
      border-color: rgba(200,165,80,0.4);
    }
    .ui-lang-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      background: rgba(20,16,32,0.98);
      border: 1px solid rgba(200,165,80,0.25);
      border-radius: 10px;
      padding: 6px 0;
      min-width: 150px;
      z-index: 1000;
      backdrop-filter: blur(16px);
      box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    }
    .ui-lang-dropdown.open {
      display: block;
    }
    .ui-lang-option {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 16px;
      font-family: var(--sans);
      font-size: 0.82rem;
      color: var(--muted);
      cursor: pointer;
      transition: all 0.15s;
    }
    .ui-lang-option:hover {
      background: rgba(200,165,80,0.12);
      color: #fff;
    }
    .ui-lang-option.active {
      color: var(--accent);
      font-weight: 600;
    }

    /* ── Language Selector (Mobile menu) ──────────────── */
    .mobile-lang-selector {
      padding: 16px 0 0;
      border-top: 1px solid rgba(255,255,255,0.06);
      margin-top: 16px;
    }
    .mobile-lang-label {
      font-family: var(--mono);
      font-size: 0.68rem;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 1.5px;
      margin-bottom: 10px;
    }
    .mobile-lang-options {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .mobile-lang-opt {
      display: flex;
      align-items: center;
      gap: 6px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      padding: 8px 14px;
      font-family: var(--sans);
      font-size: 0.8rem;
      color: var(--muted);
      cursor: pointer;
      transition: all 0.2s;
    }
    .mobile-lang-opt:hover,
    .mobile-lang-opt.active {
      background: rgba(200,165,80,0.15);
      border-color: rgba(200,165,80,0.4);
      color: #fff;
    }

/* ========== Image+Text Cards (how-it-works, contact, etc.) ========== */
.hiw-card {
  display: flex; align-items: stretch; gap: 0;
  background: linear-gradient(160deg, rgba(24,18,42,0.98) 0%, rgba(10,8,16,0.99) 100%);
  border: 1px solid rgba(200,165,80,0.15);
  border-top: 2px solid rgba(200,165,80,0.35);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 4px 16px rgba(200,165,80,0.12), 0 12px 32px rgba(0,0,0,0.2);
  margin-bottom: 24px;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.hiw-card:hover {
  border-color: rgba(200,165,80,0.4); border-top-color: rgba(200,165,80,0.6);
  box-shadow: 0 8px 28px rgba(200,165,80,0.22), 0 16px 40px rgba(0,0,0,0.25);
  transform: translateY(-3px);
}
.hiw-card.reverse { flex-direction: row-reverse; }
.hiw-img {
  width: 280px; min-height: 220px; flex-shrink: 0;
  background: rgba(200,165,80,0.06);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.hiw-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.hiw-card:hover .hiw-img img { transform: scale(1.06); }
.hiw-body { flex: 1; padding: 28px 32px; display: flex; flex-direction: column; justify-content: center; color: #f1f5f9; }
@media (max-width: 700px) {
  .hiw-card, .hiw-card.reverse { flex-direction: column; }
  .hiw-img { width: 100%; min-height: 180px; }
  .hiw-body { padding: 20px 22px; }
}

/* ========== Secondary Pages (light theme) ========== */
.page-wrap {
  position: relative; z-index: 1;
  max-width: 820px; margin: 0 auto;
  padding: 76px 24px 80px;
}
.page-hero {
  text-align: center; margin-bottom: 32px;
}
.page-eyebrow {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; color: var(--accent);
  text-transform: uppercase; letter-spacing: 2px; margin-bottom: 14px;
}
.page-title {
  font-family: 'Sora', sans-serif; font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700; letter-spacing: -1px; color: #111111; margin-bottom: 16px;
}
.page-title span {
  background: linear-gradient(135deg, #c8a550, #a07830);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.page-sub {
  font-size: 1rem; color: #555; line-height: 1.7;
  max-width: 560px; margin: 0 auto;
}
/* Content cards — stile scuro come pricing */
.content-card {
  background: linear-gradient(160deg, rgba(24,18,42,0.98) 0%, rgba(10,8,16,0.99) 100%);
  border: 1px solid rgba(200,165,80,0.15);
  border-top: 2px solid rgba(200,165,80,0.35);
  border-radius: 16px; padding: 28px 32px;
  box-shadow: 0 2px 8px rgba(200,165,80,0.06), 0 8px 24px rgba(0,0,0,0.12);
  transition: border-color .3s, box-shadow .3s, transform .3s;
  color: #e8ecf5;
}
.content-card:hover {
  border-color: rgba(200,165,80,0.4);
  border-top-color: rgba(200,165,80,0.6);
  box-shadow: 0 4px 20px rgba(200,165,80,0.15), 0 12px 32px rgba(0,0,0,0.15);
  transform: translateY(-3px);
}
.content-card.featured {
  border-color: rgba(200,165,80,0.45);
  border-top-color: rgba(200,165,80,0.7);
  box-shadow: 0 4px 20px rgba(200,165,80,0.2), 0 8px 50px rgba(200,165,80,0.1);
}
.card-grid { display: grid; gap: 20px; }
.card-grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
/* Step cards — solo pagine secondarie (scoped sotto .page-wrap) */
.page-wrap .step-card {
  display: flex; gap: 20px; align-items: flex-start;
  background: linear-gradient(160deg, rgba(24,18,42,0.98) 0%, rgba(10,8,16,0.99) 100%);
  border: 1px solid rgba(200,165,80,0.15);
  border-top: 2px solid rgba(200,165,80,0.35);
  border-radius: 16px; padding: 24px 28px;
  box-shadow: 0 4px 16px rgba(200,165,80,0.12), 0 12px 32px rgba(0,0,0,0.2), 0 0 24px rgba(200,165,80,0.08);
  transition: border-color .3s, box-shadow .3s, transform .3s; margin-bottom: 16px;
}
.page-wrap .step-card:hover {
  border-color: rgba(200,165,80,0.4);
  border-top-color: rgba(200,165,80,0.6);
  box-shadow: 0 8px 28px rgba(200,165,80,0.22), 0 16px 40px rgba(0,0,0,0.25), 0 0 32px rgba(200,165,80,0.12);
  transform: translateY(-3px);
}
.page-wrap .step-num {
  min-width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(200,165,80,0.15), rgba(180,145,60,0.15));
  border: 1px solid rgba(200,165,80,0.3);
  display: flex; align-items: center; justify-content: center;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.85rem; font-weight: 700; color: #c8a550;
}
.page-wrap .step-body h3 {
  font-family: 'Sora', sans-serif; font-size: 1rem; font-weight: 700;
  color: #e8ecf5; margin-bottom: 8px;
}
.page-wrap .step-body p {
  font-size: 0.88rem; color: #94a3b8; line-height: 1.65;
}
.page-wrap .step-body ul { margin-top: 8px; padding-left: 0; list-style: none; }
.page-wrap .step-body ul li {
  font-size: 0.85rem; color: #94a3b8;
  padding: 3px 0; display: flex; align-items: center; gap: 8px;
}
.page-wrap .step-body ul li::before {
  content: '›'; color: #c8a550; font-size: 1rem; font-weight: 700;
}
/* Section label */
.section-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; color: #c8a550;
  text-transform: uppercase; letter-spacing: 2px; margin-bottom: 32px;
  display: flex; align-items: center; gap: 10px;
}
.section-label::after { content:''; flex:1; height:1px; background: #d0d0d0; }
/* FAQ items — stile scuro come pricing */
.faq-item {
  background: linear-gradient(160deg, rgba(24,18,42,0.98) 0%, rgba(10,8,16,0.99) 100%);
  border: 1px solid rgba(200,165,80,0.15);
  border-top: 2px solid rgba(200,165,80,0.35);
  border-radius: 16px; padding: 22px 26px; margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(200,165,80,0.06), 0 8px 24px rgba(0,0,0,0.12);
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.faq-item:hover {
  border-color: rgba(200,165,80,0.4);
  border-top-color: rgba(200,165,80,0.6);
  box-shadow: 0 4px 20px rgba(200,165,80,0.15), 0 12px 32px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}
.faq-q {
  font-family: 'Sora', sans-serif; font-size: 0.95rem; font-weight: 700;
  color: #e8ecf5; margin-bottom: 10px;
  display: flex; align-items: center; gap: 10px;
}
.faq-q::before {
  content:'Q'; font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem;
  color: #c8a550; background: rgba(200,165,80,0.12);
  border: 1px solid rgba(200,165,80,0.25); border-radius: 4px;
  padding: 2px 7px; flex-shrink: 0;
}
.faq-a {
  font-size: 0.88rem; color: #94a3b8; line-height: 1.65; padding-left: 34px;
}
/* Contact blocks — stile scuro come pricing */
.contact-block {
  background: linear-gradient(160deg, rgba(24,18,42,0.98) 0%, rgba(10,8,16,0.99) 100%);
  border: 1px solid rgba(200,165,80,0.15);
  border-top: 2px solid rgba(200,165,80,0.35);
  border-radius: 16px; padding: 32px; margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(200,165,80,0.06), 0 8px 24px rgba(0,0,0,0.12);
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.contact-block:hover {
  border-color: rgba(200,165,80,0.4);
  border-top-color: rgba(200,165,80,0.6);
  box-shadow: 0 4px 20px rgba(200,165,80,0.15), 0 12px 32px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}
.contact-block h3 {
  font-family: 'Sora', sans-serif; font-size: 1rem; font-weight: 700;
  color: #e8ecf5; margin-bottom: 12px;
}
.contact-block p {
  font-size: 0.88rem; color: #94a3b8; line-height: 1.65; margin-bottom: 10px;
}
.contact-email {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.9rem; color: #c8a550;
  background: rgba(200,165,80,0.06); border: 1px solid rgba(200,165,80,0.2);
  border-radius: 8px; padding: 10px 18px; text-decoration: none;
  transition: background .2s;
}
.contact-email:hover { background: rgba(200,165,80,0.12); }
/* Why grid */
.why-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px; margin-top: 32px;
}
.why-item {
  background: linear-gradient(160deg, rgba(24,18,42,0.98) 0%, rgba(10,8,16,0.99) 100%);
  border: 1px solid rgba(200,165,80,0.15);
  border-top: 2px solid rgba(200,165,80,0.35);
  border-radius: 14px; padding: 18px;
  box-shadow: 0 2px 8px rgba(200,165,80,0.06), 0 8px 24px rgba(0,0,0,0.12);
  transition: border-color .3s, transform .3s;
}
.why-item:hover {
  border-color: rgba(200,165,80,0.4);
  transform: translateY(-2px);
}
.why-item-icon { font-size: 1.3rem; margin-bottom: 8px; }
.why-item-title {
  font-size: 0.88rem; font-weight: 700; color: #e8ecf5;
}
/* Pricing page styles — light */
.pricing-plan-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; color: #94a3b8;
  text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px;
}
.pricing-price {
  font-family: 'Sora', sans-serif; font-size: 2.4rem; font-weight: 800;
  color: #e8ecf5; margin-bottom: 6px;
}
.pricing-price span { font-size: 1rem; color: #94a3b8; font-weight: 400; }
.pricing-desc { font-size: 0.85rem; color: #94a3b8; margin-bottom: 24px; }
.pricing-features { list-style: none; margin-bottom: 28px; }
.pricing-features li {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.88rem; color: #e8ecf5;
  padding: 8px 0; border-bottom: 1px solid rgba(200,165,80,0.1);
}
.pricing-features li:last-child { border-bottom: none; }
.pricing-features li::before {
  content:''; width:16px; height:16px; border-radius:50%; flex-shrink:0;
  background: rgba(200,165,80,0.08); border: 1px solid rgba(200,165,80,0.25);
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 5l2 2 4-4' stroke='%23c8a550' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:10px; background-repeat:no-repeat; background-position:center;
}
.pricing-btn {
  display: block; width: 100%; padding: 12px; border-radius: 8px;
  font-size: 0.88rem; font-weight: 600;
  cursor: pointer; transition: opacity .2s; text-align: center;
  text-decoration: none;
}
.pricing-btn-free {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); color: #e8ecf5;
}
.pricing-btn-pro {
  background: linear-gradient(135deg, #c8a550, #a07830);
  border: none; color: #fff; font-weight: 700;
  box-shadow: 0 0 20px rgba(200,165,80,0.2);
}
.pricing-btn:hover { opacity: 0.82; }
/* Plans grid */
.plans-top { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.plans-bottom { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; margin-bottom: 56px; align-items: start; }
@media (max-width: 768px) {
  .plans-top { grid-template-columns: 1fr !important; }
  .plans-bottom { grid-template-columns: 1fr !important; }
}
/* Legal pages — light */
.legal-content {
  position: relative; z-index: 1;
  max-width: 780px; margin: 0 auto;
  padding: 100px 24px 80px;
}
.legal-content h1 {
  font-family: 'Sora', sans-serif; font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 700; color: #111111; margin-bottom: 8px; letter-spacing: -0.5px;
}
.legal-content .subtitle {
  font-size: 0.9rem; color: #555; margin-bottom: 40px;
}
.legal-content h2 {
  font-family: 'Sora', sans-serif; font-size: 1.15rem; font-weight: 700;
  color: #111111; margin: 36px 0 14px; letter-spacing: -0.3px;
}
.legal-content p, .legal-content li {
  font-size: 0.9rem; color: #444; line-height: 1.75; margin-bottom: 12px;
}
.legal-content ul { padding-left: 20px; margin-bottom: 16px; }
.legal-content a { color: #c8a550; text-decoration: none; }
.legal-content a:hover { text-decoration: underline; }
/* Legal cards — unified style */
.legal-card {
  background: linear-gradient(160deg, rgba(24,18,42,0.98) 0%, rgba(10,8,16,0.99) 100%);
  border: 1px solid rgba(200,165,80,0.15);
  border-top: 2px solid rgba(200,165,80,0.35);
  border-radius: 16px; padding: 28px 32px; margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(200,165,80,0.06), 0 8px 24px rgba(0,0,0,0.12);
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.legal-card:hover {
  border-color: rgba(200,165,80,0.4);
  border-top-color: rgba(200,165,80,0.6);
  box-shadow: 0 4px 20px rgba(200,165,80,0.15), 0 12px 32px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}
.legal-card h2 {
  font-family: 'Sora', sans-serif; font-size: 1.05rem; font-weight: 700;
  color: #e8ecf5; margin-bottom: 12px;
}
.legal-card p, .legal-card li {
  font-size: 0.88rem; color: #94a3b8; line-height: 1.7; margin-bottom: 8px;
}
.legal-card ul { padding-left: 20px; margin-bottom: 12px; }
.legal-card a { color: #c8a550; text-decoration: none; }
.legal-card a:hover { text-decoration: underline; }
/* Page footer — light */
.site-footer {
  text-align: center; padding: 32px 24px;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; color: #888;
  border-top: 1px solid #e0e0e0; position: relative; z-index: 1;
}
.site-footer a { color: #c8a550; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
/* Mobile menu — light theme override */
.mobile-menu {
  visibility: hidden; opacity: 0; pointer-events: none;
  position: fixed; top: 60px; left: 0; right: 0; height: calc(100vh - 60px);
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(20px);
  z-index: 9990;
  display: flex; flex-direction: column; padding: 20px 32px;
  border-top: 2px solid rgba(200,165,80,0.3);
  overflow-y: auto;
  transform: translateY(-15px);
  transition: opacity .35s cubic-bezier(0.16,1,0.3,1), visibility .35s, transform .35s cubic-bezier(0.16,1,0.3,1);
}
.mobile-menu.open { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); }
.mobile-menu a {
  font-family: 'Sora', sans-serif; font-size: 1.05rem; font-weight: 600;
  color: #1a1a2e; text-decoration: none;
  padding: 11px 0; border-bottom: 1px solid #e0e0e0;
  display: block; transition: color .2s, padding-left .2s;
  opacity: 0; transform: translateY(-8px);
}
.mobile-menu.open a {
  opacity: 1; transform: translateY(0);
  transition: color .2s, padding-left .2s, opacity .3s ease, transform .3s ease;
}
.mobile-menu.open a:nth-child(1) { transition-delay: 0.03s; }
.mobile-menu.open a:nth-child(2) { transition-delay: 0.06s; }
.mobile-menu.open a:nth-child(3) { transition-delay: 0.09s; }
.mobile-menu.open a:nth-child(4) { transition-delay: 0.12s; }
.mobile-menu.open a:nth-child(5) { transition-delay: 0.15s; }
.mobile-menu.open a:nth-child(6) { transition-delay: 0.18s; }
.mobile-menu.open a:nth-child(7) { transition-delay: 0.21s; }
.mobile-menu.open a:nth-child(8) { transition-delay: 0.24s; }
.mobile-menu.open a:nth-child(9) { transition-delay: 0.27s; }
.mobile-menu a:hover, .mobile-menu a:active { color: #c8a550; padding-left: 6px; }
.mobile-menu-cta {
  margin-top: 18px;
  background: linear-gradient(135deg, #c8a550, #a07830);
  border: none; border-radius: 10px; color: #fff;
  font-size: 1rem; font-weight: 700;
  padding: 14px 20px; cursor: pointer; text-align: center; display: block;
  text-decoration: none;
}

/* ── Study hook tagline ("Capisci X in N minuti") ─────────────────────────── */
.study-hook {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #7a1a1a;
  color: #ffffff;
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 8px 18px;
  border-radius: 8px;
  margin-bottom: 16px;
  animation: fadeUp 0.4s ease both;
}
.study-hook .hook-bolt {
  font-size: 1.1rem;
}