/* ═══════════════════════════════════════════════════════════════
   SPENDIMEGLIO — style.css  v2
   Mobile-First · CSS Variables · Dark Mode · Apple-like Design
   ═══════════════════════════════════════════════════════════════ */

/* ── RESET ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; } /* explicit override */

/* ── CSS VARIABLES (Light) ──────────────────────────────────────── */
:root {
  --bg-primary:    #f5f5f7;
  --bg-secondary:  #ffffff;
  --bg-card:       #ffffff;
  --bg-header:     rgba(245,245,247,0.82);

  --text-primary:  #1d1d1f;
  --text-secondary:#6e6e73;
  --text-tertiary: #aeaeb2;

  /* accent palette */
  --accent:        #1e90ff;
  --accent-2:      #66b7ff;
  --accent-soft:   rgba(30,144,255,0.10);
  --accent-border: rgba(30,144,255,0.30);
  --accent-glow:   rgba(30,144,255,0.22);

  /* card accents */
  --c-sage:        #1e90ff;
  --c-ocean:       #66b7ff;
  --c-lavender:    #4b6f93;
  --c-peach:       #111111;

  --c-sage-soft:    rgba(30,144,255,0.10);
  --c-ocean-soft:   rgba(102,183,255,0.12);
  --c-lavender-soft:rgba(30,144,255,0.08);
  --c-peach-soft:   rgba(17,17,17,0.06);

  --border-light:  rgba(0,0,0,0.07);
  --border-medium: rgba(0,0,0,0.11);

  --shadow-xs: 0 1px 3px rgba(0,0,0,0.05);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06),  0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.07), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.09), 0 2px 8px rgba(0,0,0,0.04);

  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   22px;
  --radius-xl:   30px;
  --radius-full: 9999px;

  --font-sans:  'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Lora', Georgia, serif;

  --tr-fast:   0.15s ease;
  --tr-smooth: 0.3s cubic-bezier(0.4,0,0.2,1);
  --tr-spring: 0.5s cubic-bezier(0.34,1.56,0.64,1);
}

/* ── CSS VARIABLES (Dark) ────────────────────────────────────────── */
[data-theme="dark"] {
  --bg-primary:    #1c1c1e;
  --bg-secondary:  #2c2c2e;
  --bg-card:       #2c2c2e;
  --bg-header:     rgba(28,28,30,0.82);

  --text-primary:  #f5f5f7;
  --text-secondary:#aeaeb2;
  --text-tertiary: #6e6e73;

  --accent:        #1e90ff;
  --accent-2:      #66b7ff;
  --accent-soft:   rgba(30,144,255,0.14);
  --accent-border: rgba(30,144,255,0.38);
  --accent-glow:   rgba(30,144,255,0.28);

  --c-sage:     #1e90ff;
  --c-ocean:    #66b7ff;
  --c-lavender: #8ec8ff;
  --c-peach:    #f5f5f7;

  --c-sage-soft:    rgba(30,144,255,0.14);
  --c-ocean-soft:   rgba(102,183,255,0.14);
  --c-lavender-soft:rgba(30,144,255,0.14);
  --c-peach-soft:   rgba(245,245,247,0.10);

  --border-light:  rgba(255,255,255,0.07);
  --border-medium: rgba(255,255,255,0.12);

  --shadow-xs: 0 1px 3px rgba(0,0,0,0.28);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.32),  0 1px 2px rgba(0,0,0,0.20);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.38), 0 2px 6px rgba(0,0,0,0.20);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.44), 0 2px 8px rgba(0,0,0,0.22);
}

/* ── BODY ─────────────────────────────────────────────────────────── */
body {
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.35s ease, color 0.35s ease;
}

/* ── CONTAINER ────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── TYPOGRAPHY UTILS ─────────────────────────────────────────────── */
.section-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 14px;
}

.section-title {
  font-size: clamp(28px, 6vw, 44px); font-weight: 700;
  letter-spacing: 0; line-height: 1.13;
  color: var(--text-primary); margin-bottom: 14px;
}

.section-subtitle {
  font-size: 16px; color: var(--text-secondary);
  line-height: 1.7; max-width: 560px; margin-bottom: 44px;
}

.br-desktop { display: none; }

/* ── ANIMATIONS ───────────────────────────────────────────────────── */
.animate-on-scroll {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1),
              transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
.animate-on-scroll:nth-child(2) { transition-delay: 0.08s; }
.animate-on-scroll:nth-child(3) { transition-delay: 0.16s; }
.animate-on-scroll:nth-child(4) { transition-delay: 0.24s; }
.animate-on-scroll:nth-child(5) { transition-delay: 0.32s; }

@keyframes fadeInUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
@keyframes pulse    { 0%,100%{opacity:1;} 50%{opacity:0.4;} }
@keyframes spin     { to { transform:rotate(360deg); } }
@keyframes dotBounce{ 0%,80%,100%{transform:scale(0);opacity:.4;} 40%{transform:scale(1);opacity:1;} }
@keyframes modalIn  { from{opacity:0;transform:translateY(16px) scale(0.97);} to{opacity:1;transform:translateY(0) scale(1);} }
@keyframes overlayIn{ from{opacity:0;} to{opacity:1;} }

/* ══════════════════════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════════════════════ */
.site-header {
  position: fixed; top:0; left:0; right:0; z-index:100;
  height: 60px;
  background: var(--bg-header);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border-light);
  transition: background-color 0.35s ease;
}
.header-inner {
  height:100%; max-width:1120px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo { display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--text-primary); transition:opacity var(--tr-fast); }
.logo:hover { opacity:0.7; }
.logo-mark { color:var(--accent); font-size:18px; line-height:1; }
.logo-text { font-size:18px; font-weight:700; letter-spacing:0; }

/* ── Theme Toggle ─────────────────────────────────────────────── */
.theme-toggle { cursor:pointer; display:flex; align-items:center; }
.theme-toggle input { position:absolute; opacity:0; width:0; height:0; }
.toggle-track {
  display:flex; align-items:center;
  width:52px; height:28px; padding:3px;
  background:var(--bg-secondary); border:1.5px solid var(--border-medium);
  border-radius:var(--radius-full); transition:var(--tr-smooth); box-shadow:var(--shadow-xs);
}
.theme-toggle input:checked ~ .toggle-track { background:var(--accent); border-color:var(--accent); }
.toggle-thumb {
  width:22px; height:22px; background:var(--bg-secondary); border-radius:50%;
  box-shadow:var(--shadow-sm); display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
  transition:transform var(--tr-spring);
}
.theme-toggle input:checked ~ .toggle-track .toggle-thumb { transform:translateX(24px); }
.toggle-icon { position:absolute; display:flex; align-items:center; justify-content:center; color:var(--accent); transition:opacity var(--tr-fast),transform var(--tr-smooth); }
.toggle-icon--moon { color:#f5f5f7; opacity:0; transform:scale(0.6); }
.theme-toggle input:checked ~ .toggle-track .toggle-icon--sun { opacity:0; transform:scale(0.6); }
.theme-toggle input:checked ~ .toggle-track .toggle-icon--moon { opacity:1; transform:scale(1); }
.theme-toggle:focus-within .toggle-track { outline:2px solid var(--accent); outline-offset:2px; }

/* ══════════════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════════════ */
.hero {
  padding-top:112px; padding-bottom:76px;
  min-height:76svh; display:flex; align-items:center;
  position:relative; overflow:hidden;
}
.hero::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(30,144,255,0.13) 0%,transparent 60%),
    radial-gradient(ellipse 50% 40% at 90% 80%,  rgba(102,183,255,0.10) 0%,transparent 60%);
  pointer-events:none;
}
.hero-inner { position:relative; z-index:1; text-align:center; }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; background:var(--accent-soft);
  border:1px solid var(--accent-border); border-radius:var(--radius-full);
  font-size:12px; font-weight:600; letter-spacing:0.04em; color:var(--accent);
  margin-bottom:22px;
}
.badge-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse 2s ease-in-out infinite; }
.hero-title { font-size:clamp(36px,8vw,68px); font-weight:700; letter-spacing:0; line-height:1.1; margin-bottom:22px; max-width:820px; margin-left:auto; margin-right:auto; }
.hero-title-accent { font-style:italic; font-family:var(--font-serif); color:var(--accent); font-weight:400; }
.hero-subtitle { font-size:clamp(16px,2.5vw,19px); color:var(--text-secondary); line-height:1.65; max-width:590px; margin:0 auto 20px; }
.hero-trust {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:8px; margin:0 auto 32px; max-width:680px;
}
.hero-trust span {
  display:inline-flex; align-items:center; min-height:30px;
  padding:6px 12px; border-radius:var(--radius-full);
  background:var(--bg-secondary); border:1px solid var(--border-light);
  color:var(--text-secondary); font-size:12px; font-weight:600;
  box-shadow:var(--shadow-xs);
}
.cta-primary {
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px; background:var(--accent); color:#fff;
  font-family:var(--font-sans); font-size:15px; font-weight:600;
  text-decoration:none; border-radius:var(--radius-full);
  box-shadow:0 4px 20px var(--accent-glow), var(--shadow-md);
  transition:transform var(--tr-smooth), box-shadow var(--tr-smooth);
  margin-bottom:0;
  min-height:52px;
  line-height:1;
}
.cta-primary:hover { transform:translateY(-2px); box-shadow:0 8px 32px var(--accent-glow),var(--shadow-lg); }
.cta-primary:active { transform:scale(0.97); }
.cta-arrow { display:block; flex-shrink:0; transition:transform var(--tr-smooth); }
.cta-primary:hover .cta-arrow { transform:translateY(3px); }
.hero-visual { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:44px; }
.visual-card {
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  padding:14px 18px; background:var(--bg-card); border:1px solid var(--border-light);
  border-radius:var(--radius-md); box-shadow:var(--shadow-md); min-width:130px;
  animation:fadeInUp 0.7s ease both;
}
.visual-card--1{animation-delay:0.5s;} .visual-card--2{animation-delay:0.65s;} .visual-card--3{animation-delay:0.8s;}
.visual-card-label { font-size:11px; font-weight:500; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.08em; }
.visual-card-value { font-size:15px; font-weight:600; color:var(--text-primary); display:flex; align-items:center; gap:5px; }
.trend { color:var(--accent); font-size:13px; }

/* ══════════════════════════════════════════════════════════════════
   MINDSET SECTION — redesigned cards
══════════════════════════════════════════════════════════════════ */

/* Aggiungi queste regole al tuo style.css esistente sotto la sezione MINDSET SECTION */

.card-body p {
  margin-bottom: 12px;
}
.card-body p:last-child {
  margin-bottom: 0;
}

/* Elenchi puntati per le Card */
.mindset-list {
  list-style: none;
  padding: 0;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mindset-list li {
  position: relative;
  padding-left: 20px;
  line-height: 1.4;
  color: var(--text-primary);
}
.mindset-list li::before {
  content: '✦';
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 12px;
  color: var(--accent);
}

/* Colora il bullet in base alla card */
.mindset-card[data-accent="sage"] .mindset-list li::before { color: var(--c-sage); }
.mindset-card[data-accent="ocean"] .mindset-list li::before { color: var(--c-ocean); }
.mindset-card[data-accent="lavender"] .mindset-list li::before { color: var(--c-lavender); }
.mindset-card[data-accent="peach"] .mindset-list li::before { color: var(--c-peach); }

/* Layout per "Alternative" (Card 2) */
.mindset-list-alt {
  list-style: none;
  padding: 0;
  margin: 18px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mindset-list-alt li {
  padding: 12px 0;
  border-top: 1px solid var(--border-light);
  font-size: 13.5px;
}
.mindset-list-alt li:last-child {
  border-bottom: 1px solid var(--border-light);
}
.swap-line {
  display:grid;
  grid-template-columns:70px minmax(0,1fr);
  align-items:start;
  gap:8px;
  line-height:1.45;
}
.swap-line + .swap-line {
  margin-top:6px;
}
.swap-line em,
.swap-line strong {
  min-width:0;
}
.mindset-list-alt .label-invece,
.mindset-list-alt .label-fai {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.8;
}
.mindset-list-alt .label-invece {
  color: var(--text-tertiary);
}
.mindset-list-alt .label-fai {
  color: var(--accent);
}
.mindset-list-alt em { font-style: normal; color: var(--text-secondary); }
.mindset-list-alt strong { color: var(--text-primary); }

.mindset {
  padding:64px 0 96px;
  background:var(--bg-secondary);
  border-top:1px solid var(--border-light);
  border-bottom:1px solid var(--border-light);
  transition:background-color 0.35s ease;
}
.mindset-header { margin-bottom:0; }

.cards-grid {
  display:grid; grid-template-columns:1fr; gap:16px;
}

/* ── CARD base ──────────────────────────────────────────────── */
.mindset-card {
  position:relative; overflow:hidden;
  background:var(--bg-primary);
  border:1px solid var(--border-light);
  border-radius:var(--radius-lg);
  padding:28px 26px 22px;
  box-shadow:var(--shadow-sm);
  transition:transform var(--tr-smooth), box-shadow var(--tr-smooth), border-color var(--tr-smooth);
  cursor:default;
}

/* glow blob behind content */
.card-glow {
  display:none;
}

.mindset-card[data-accent="sage"]     .card-glow { background:var(--c-sage-soft); }
.mindset-card[data-accent="ocean"]    .card-glow { background:var(--c-ocean-soft); }
.mindset-card[data-accent="lavender"] .card-glow { background:var(--c-lavender-soft); }
.mindset-card[data-accent="peach"]    .card-glow { background:var(--c-peach-soft); }

.mindset-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.mindset-card:hover .card-glow { opacity:1; transform:scale(1.25); }

/* bottom accent line */
.mindset-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  opacity:0; transition:opacity var(--tr-smooth);
}
.mindset-card[data-accent="sage"]::after     { background:var(--c-sage); }
.mindset-card[data-accent="ocean"]::after    { background:var(--c-ocean); }
.mindset-card[data-accent="lavender"]::after { background:var(--c-lavender); }
.mindset-card[data-accent="peach"]::after    { background:var(--c-peach); }
.mindset-card:hover::after { opacity:1; }

/* card inner layout */
.card-header-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }

.card-icon-wrap {
  width:48px; height:48px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; line-height:1;
  transition:transform var(--tr-spring);
}
.mindset-card[data-accent="sage"]     .card-icon-wrap { background:var(--c-sage-soft); }
.mindset-card[data-accent="ocean"]    .card-icon-wrap { background:var(--c-ocean-soft); }
.mindset-card[data-accent="lavender"] .card-icon-wrap { background:var(--c-lavender-soft); }
.mindset-card[data-accent="peach"]    .card-icon-wrap { background:var(--c-peach-soft); }
.mindset-card:hover .card-icon-wrap { transform:rotate(-6deg) scale(1.08); }

.card-number {
  font-size:12px; font-weight:700; letter-spacing:0.1em;
  color:var(--text-tertiary); text-transform:uppercase;
}

.card-title {
  font-size:16px; font-weight:700; letter-spacing:0;
  line-height:1.3; color:var(--text-primary); margin-bottom:10px;
}

.card-body {
  font-size:13.5px; color:var(--text-secondary); line-height:1.65;
  flex:1;
}
.card-body strong { color:var(--text-primary); font-weight:600; }

.card-footer-row {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:20px;
}

.card-tag {
  display:inline-flex; align-items:center; padding:4px 11px;
  border-radius:var(--radius-full); font-size:11px; font-weight:600; letter-spacing:0.04em;
}
.mindset-card[data-accent="sage"]     .card-tag { background:var(--c-sage-soft); color:var(--c-sage); }
.mindset-card[data-accent="ocean"]    .card-tag { background:var(--c-ocean-soft); color:var(--c-ocean); }
.mindset-card[data-accent="lavender"] .card-tag { background:var(--c-lavender-soft); color:var(--c-lavender); }
.mindset-card[data-accent="peach"]    .card-tag { background:var(--c-peach-soft); color:var(--c-peach); }

.card-caret { color:var(--text-tertiary); display:flex; align-items:center; transition:color var(--tr-fast), transform var(--tr-smooth); }
.mindset-card:hover .card-caret { transform:translateX(4px); }
.mindset-card[data-accent="sage"]:hover     .card-caret { color:var(--c-sage); }
.mindset-card[data-accent="ocean"]:hover    .card-caret { color:var(--c-ocean); }
.mindset-card[data-accent="lavender"]:hover .card-caret { color:var(--c-lavender); }
.mindset-card[data-accent="peach"]:hover    .card-caret { color:var(--c-peach); }

/* ══════════════════════════════════════════════════════════════════
   TOOL SECTION
══════════════════════════════════════════════════════════════════ */
.tool-section { padding:96px 0; scroll-margin-top:80px; }

.tool-card {
  background:var(--bg-card); border:1px solid var(--border-light);
  border-radius:var(--radius-xl); padding:28px;
  box-shadow:var(--shadow-lg); max-width:680px; margin:0 auto;
  display:flex; flex-direction:column; gap:24px;
  transition:background-color 0.35s ease;
}

/* ── Upload Area ─────────────────────────────────────────────── */
.upload-area {
  border:2px dashed var(--accent-border);
  border-radius:var(--radius-lg); background:var(--accent-soft);
  cursor:pointer; transition:border-color var(--tr-smooth), background var(--tr-smooth), box-shadow var(--tr-smooth);
  min-height:160px; display:flex; align-items:center; justify-content:center;
}
.upload-area:hover, .upload-area:focus-within {
  border-color:var(--accent); background:rgba(30,144,255,0.07);
  box-shadow:0 0 0 4px var(--accent-soft); outline:none;
}
.upload-area.is-dragging { border-color:var(--accent); background:rgba(30,144,255,0.12); box-shadow:0 0 0 4px var(--accent-soft); }

/* hide the real input visually but keep it accessible */
.upload-area input[type="file"] {
  position:absolute; opacity:0; width:0; height:0; pointer-events:none;
}

.upload-default { display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:24px; }
.upload-icon { color:var(--accent); opacity:0.7; }
.upload-title { font-size:15px; font-weight:600; color:var(--text-primary); }
.upload-sub { font-size:13px; color:var(--text-tertiary); }
.upload-btn {
  display:inline-block; padding:8px 18px; background:transparent;
  border:1.5px solid var(--border-medium); border-radius:var(--radius-full);
  font-family:var(--font-sans); font-size:13px; font-weight:500;
  color:var(--text-secondary); cursor:pointer; margin-top:4px;
  transition:border-color var(--tr-fast), color var(--tr-fast), background var(--tr-fast);
}
.upload-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }

/* Success state */
.upload-success {
  display:flex; align-items:center; gap:14px;
  padding:18px 20px; width:100%;
}
.success-icon {
  width:38px; height:38px; border-radius:50%;
  background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:700; flex-shrink:0;
}
.success-info { flex:1; display:flex; flex-direction:column; gap:2px; overflow:hidden; }
.success-filename { font-size:14px; font-weight:600; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.success-label { font-size:12px; color:var(--accent); font-weight:500; }
.success-remove {
  background:none; border:none; color:var(--text-tertiary); cursor:pointer;
  font-size:14px; padding:6px; border-radius:50%; flex-shrink:0;
  transition:color var(--tr-fast), background var(--tr-fast);
}
.success-remove:hover { color:var(--text-primary); background:var(--border-light); }

/* ── Goal Input ──────────────────────────────────────────────── */
.goal-field { display:flex; flex-direction:column; gap:10px; }
.goal-label { display:flex; align-items:center; justify-content:space-between; }
.goal-label-text { font-size:14px; font-weight:600; color:var(--text-primary); }
.goal-label-hint { font-size:12px; color:var(--accent); font-weight:500; }
.goal-input-wrapper { position:relative; display:flex; align-items:center; }
.goal-input-icon { position:absolute; left:14px; color:var(--text-tertiary); pointer-events:none; transition:color var(--tr-fast); }
.goal-input {
  width:100%; padding:13px 16px 13px 44px;
  background:var(--bg-primary); border:1.5px solid var(--border-medium);
  border-radius:var(--radius-md); font-family:var(--font-sans); font-size:14px;
  color:var(--text-primary); outline:none;
  transition:border-color var(--tr-smooth), box-shadow var(--tr-smooth), background-color 0.35s ease;
}
.goal-input::placeholder { color:var(--text-tertiary); }
.goal-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); background:var(--bg-secondary); }
.goal-input-wrapper:focus-within .goal-input-icon { color:var(--accent); }

/* ── Generate Button ─────────────────────────────────────────── */
.generate-btn {
  width:100%; padding:16px 24px;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color:#fff; font-family:var(--font-sans); font-size:15px; font-weight:600;
  border:none; border-radius:var(--radius-md); cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
  box-shadow:0 4px 20px var(--accent-glow), var(--shadow-sm);
  transition:transform var(--tr-smooth), box-shadow var(--tr-smooth), opacity var(--tr-fast);
  position:relative; overflow:hidden;
}
.generate-btn::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,0.12) 0%,transparent 60%); opacity:0; transition:opacity var(--tr-fast); }
.generate-btn:hover { transform:translateY(-2px); box-shadow:0 8px 32px var(--accent-glow), var(--shadow-md); }
.generate-btn:hover::before { opacity:1; }
.generate-btn:active { transform:scale(0.98); }
.generate-btn:disabled { opacity:0.6; cursor:not-allowed; transform:none; }
.generate-btn-icon { font-size:16px; transition:transform var(--tr-spring); }
.generate-btn:hover .generate-btn-icon { transform:rotate(72deg) scale(1.2); }
.free-note {
  margin-top:-10px; text-align:center;
  color:var(--text-secondary); font-size:12px; line-height:1.5;
}

/* ── Report Area ─────────────────────────────────────────────── */
.report-area { max-width:680px; margin:40px auto 0; }
.report-loading { display:none; flex-direction:column; align-items:center; padding:64px 24px; text-align:center; gap:18px; }
.report-loading.is-visible { display:flex; animation:fadeIn 0.4s ease; }
.loading-spinner { width:48px; height:48px; }
.spinner-ring { width:100%; height:100%; border:3px solid var(--border-light); border-top-color:var(--accent); border-radius:50%; animation:spin 0.9s linear infinite; }
.loading-text { font-size:15px; color:var(--text-secondary); font-weight:500; font-style:italic; font-family:var(--font-serif); }
.loading-dots { display:flex; gap:6px; }
.loading-dots span { width:6px; height:6px; background:var(--accent); border-radius:50%; animation:dotBounce 1.4s ease-in-out infinite; }
.loading-dots span:nth-child(1){animation-delay:0s;} .loading-dots span:nth-child(2){animation-delay:0.16s;} .loading-dots span:nth-child(3){animation-delay:0.32s;}
.report-content {
  display:none; background:var(--bg-card); border:1px solid var(--border-light);
  border-radius:var(--radius-xl); padding:28px; box-shadow:var(--shadow-lg);
  animation:fadeInUp 0.6s ease both; transition:background-color 0.35s ease;
}
.report-content.is-visible { display:block; }

/* report inner components */
.report-header { display:flex; align-items:center; gap:12px; padding-bottom:20px; border-bottom:1px solid var(--border-light); margin-bottom:20px; }
.report-header-icon { width:44px; height:44px; border-radius:12px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.report-header-text h3 { font-size:18px; font-weight:700; color:var(--text-primary); letter-spacing:0; }
.report-header-text p { font-size:13px; color:var(--text-secondary); margin-top:2px; }
.report-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:20px; }
.stat-item { padding:14px 12px; background:var(--bg-primary); border-radius:var(--radius-md); border:1px solid var(--border-light); text-align:center; }
.stat-value { font-size:20px; font-weight:700; color:var(--text-primary); letter-spacing:0; display:block; }
.stat-value--text { font-size:14px; line-height:1.25; min-height:25px; display:flex; align-items:center; justify-content:center; }
.stat-value.positive { color:var(--accent); }
.stat-label { font-size:11px; font-weight:500; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.08em; display:block; margin-top:4px; }
.report-section { margin-bottom:20px; }
.report-section-title { font-size:14px; font-weight:700; color:var(--text-primary); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.report-section-title span { font-size:16px; }
.suggestion-list { display:flex; flex-direction:column; gap:8px; list-style:none; }
.suggestion-item { display:flex; align-items:flex-start; gap:12px; padding:12px 14px; background:var(--bg-primary); border-radius:var(--radius-md); border:1px solid var(--border-light); font-size:14px; color:var(--text-secondary); line-height:1.5; }
.suggestion-item-icon { font-size:16px; flex-shrink:0; margin-top:1px; }
.report-zen-note { padding:16px; background:var(--accent-soft); border:1px solid var(--accent-border); border-radius:var(--radius-md); font-size:14px; color:var(--accent); font-style:italic; font-family:var(--font-serif); line-height:1.6; text-align:center; }

/* ══════════════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════════════ */
.site-footer { padding:64px 0 40px; border-top:1px solid var(--border-light); }
.footer-inner { display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; }
.footer-brand { display:flex; align-items:center; gap:8px; font-size:16px; font-weight:700; letter-spacing:0; color:var(--text-primary); }
.footer-tagline { font-size:14px; color:var(--text-secondary); }
.footer-note { font-size:12px; color:var(--text-tertiary); }
.footer-links { display:flex; align-items:center; gap:10px; margin-top:6px; }
.footer-link {
  background:none; border:none; cursor:pointer;
  font-family:var(--font-sans); font-size:13px; font-weight:500;
  color:var(--text-secondary); padding:4px 0;
  border-bottom:1px solid transparent;
  transition:color var(--tr-fast), border-color var(--tr-fast);
}
.footer-link:hover { color:var(--accent); border-bottom-color:var(--accent); }
.footer-sep { color:var(--text-tertiary); font-size:12px; }

/* ══════════════════════════════════════════════════════════════════
   MODALS
══════════════════════════════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,0.45);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center;
  padding:20px;
}
.modal-overlay.is-open {
  display:flex;
  animation:overlayIn 0.25s ease both;
}
.modal-card {
  position:relative;
  background:var(--bg-card);
  border:1px solid var(--border-light);
  border-radius:var(--radius-xl);
  padding:40px 32px 36px;
  box-shadow:var(--shadow-xl, 0 24px 80px rgba(0,0,0,0.18));
  max-width:460px; width:100%;
  animation:modalIn 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
  transition:background-color 0.35s ease;
  text-align:center;
}
.modal-card--wide { max-width:620px; text-align:left; }
.modal-close {
  position:absolute; top:18px; right:18px;
  background:var(--bg-primary); border:1px solid var(--border-light);
  border-radius:50%; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text-secondary);
  transition:background var(--tr-fast), color var(--tr-fast);
}
.modal-close:hover { background:var(--border-light); color:var(--text-primary); }
.modal-icon-wrap { font-size:40px; line-height:1; margin-bottom:18px; display:block; }
.modal-title { font-size:22px; font-weight:700; letter-spacing:0; color:var(--text-primary); margin-bottom:10px; }
.modal-card--wide .modal-title { text-align:left; }
.modal-subtitle { font-size:14px; color:var(--text-secondary); line-height:1.6; margin-bottom:24px; }
.modal-card--wide .modal-subtitle { text-align:left; }
.modal-email-btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 22px; background:var(--accent); color:#fff;
  font-family:var(--font-sans); font-size:14px; font-weight:600;
  text-decoration:none; border-radius:var(--radius-md);
  box-shadow:0 4px 16px var(--accent-glow);
  transition:transform var(--tr-smooth), box-shadow var(--tr-smooth);
  margin-bottom:16px;
}
.modal-email-btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px var(--accent-glow); }
.modal-note { font-size:12px; color:var(--text-tertiary); }

/* ── Privacy Tabs ────────────────────────────────────────────── */
.privacy-tabs {
  display:flex; gap:4px; background:var(--bg-primary);
  border-radius:var(--radius-sm); padding:4px; margin-bottom:20px;
}
.privacy-tab {
  flex:1; padding:8px 10px; background:transparent;
  border:none; border-radius:8px;
  font-family:var(--font-sans); font-size:12px; font-weight:600;
  color:var(--text-secondary); cursor:pointer;
  transition:background var(--tr-fast), color var(--tr-fast), box-shadow var(--tr-fast);
  text-align:center;
}
.privacy-tab.is-active { background:var(--bg-card); color:var(--text-primary); box-shadow:var(--shadow-xs); }
.privacy-tab:not(.is-active):hover { color:var(--accent); }

.privacy-scroll { max-height:340px; overflow-y:auto; padding-right:8px; scrollbar-width:thin; scrollbar-color:var(--border-medium) transparent; }
.privacy-scroll::-webkit-scrollbar { width:5px; }
.privacy-scroll::-webkit-scrollbar-track { background:transparent; }
.privacy-scroll::-webkit-scrollbar-thumb { background:var(--border-medium); border-radius:99px; }

.privacy-panel { display:none; }
.privacy-panel.is-active { display:block; animation:fadeIn 0.3s ease; }

.privacy-section { margin-bottom:22px; }
.privacy-section h4 { font-size:13px; font-weight:700; color:var(--text-primary); letter-spacing:0; margin-bottom:8px; }
.privacy-section p { font-size:13px; color:var(--text-secondary); line-height:1.65; margin-bottom:8px; }
.privacy-section p:last-child { margin-bottom:0; }
.privacy-section a { color:var(--accent); text-decoration:none; border-bottom:1px solid transparent; transition:border-color var(--tr-fast); }
.privacy-section a:hover { border-bottom-color:var(--accent); }

/* Cookie table */
.cookie-table { margin-top:12px; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--border-light); }
.cookie-row { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.6fr; gap:0; }
.cookie-row > span { padding:9px 12px; font-size:12px; color:var(--text-secondary); border-bottom:1px solid var(--border-light); }
.cookie-row:last-child > span { border-bottom:none; }
.cookie-row--head > span { font-weight:700; color:var(--text-primary); font-size:11px; text-transform:uppercase; letter-spacing:0.06em; background:var(--bg-primary); }
.cookie-row code { font-size:11px; background:var(--bg-primary); padding:2px 5px; border-radius:4px; font-family:ui-monospace,monospace; }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — tablet ≥ 600px
══════════════════════════════════════════════════════════════════ */
@media (min-width:600px) {
  .container { padding:0 32px; }
  .cards-grid { grid-template-columns:repeat(2,1fr); gap:20px; }
  .tool-card { padding:40px; }
  .report-content { padding:40px; }
  .report-stats { grid-template-columns:repeat(4,1fr); }
  .modal-card { padding:48px 40px 40px; }
}

@media (max-width:380px) {
  .swap-line {
    grid-template-columns:1fr;
    gap:2px;
  }
  .swap-line + .swap-line {
    margin-top:8px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — desktop ≥ 900px
══════════════════════════════════════════════════════════════════ */
@media (min-width:900px) {
  .br-desktop { display:inline; }
  .container { padding:0 48px; }
  .hero { padding-top:124px; min-height:76svh; }
  .hero-visual { flex-wrap:nowrap; gap:16px; }
  .cards-grid { grid-template-columns:repeat(4,1fr); gap:20px; }
  .mindset-card { padding:28px 24px 22px; }
}

/* ══════════════════════════════════════════════════════════════════
   ACCESSIBILITY
══════════════════════════════════════════════════════════════════ */
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
  .animate-on-scroll { opacity:1; transform:none; }
}