/* =============================================
   SlideDoctor — Premium Warm Editorial Design
   ============================================= */

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

:root{
  --bg:#fafaf8;
  --surface:#ffffff;
  --border:#e8e8e4;
  --text-primary:#1a1a1a;
  --text-secondary:#6b6b6b;
  --text-muted:#a0a0a0;
  --accent:#e8572a;
  --accent-hover:#d44d22;
  --accent-light:rgba(232,87,42,0.06);
  --success:#2a7a4b;
  --warning:#b45309;
  --danger:#c0392b;
  --radius:16px;
  --radius-sm:10px;
  --ease:cubic-bezier(0.4, 0, 0.2, 1);
  --head:'Lora', serif;
  --body:'Geist', sans-serif;
}

html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
body{font-family:var(--body);background:var(--bg);color:var(--text-primary);line-height:1.7;overflow-x:hidden}

/* --- Dot Grid Texture --- */
.bg-texture {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(0,0,0,0.045) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* === NAVBAR === */
.main-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(250, 250, 248, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #e8e8e4;
  padding: 0 48px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* === HERO === */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0 24px}
.hero-content{position:relative;z-index:2;text-align:center;max-width:700px;display:flex;flex-direction:column;align-items:center}

.hero-blob {
  position: absolute;
  top: 10%; right: 10%;
  width: 500px; height: 500px;
  background: rgba(232,87,42,0.07);
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation: blobMorph 12s ease-in-out infinite alternate;
  z-index: 1;
  pointer-events: none;
}
@keyframes blobMorph {
  0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: translate(0, 0) scale(1); }
  50% { border-radius: 40% 60% 70% 30% / 50% 60% 30% 60%; transform: translate(-20px, 20px) scale(1.05); }
  100% { border-radius: 50% 50% 40% 60% / 40% 40% 60% 50%; transform: translate(20px, -20px) scale(0.95); }
}

.hero-pill {
  background: rgba(232,87,42,0.08);
  border: 1px solid rgba(232,87,42,0.2);
  border-radius: 99px;
  padding: 6px 14px;
  font-family: var(--body); font-weight: 500; font-size: 12px;
  letter-spacing: 0.05em; color: var(--accent);
  margin-bottom: 24px; text-transform: uppercase;
}

.hero-headline{font-family:var(--head);font-style:italic;font-size:clamp(40px,6vw,68px);font-weight:600;color:var(--text-primary);line-height:1.15;margin-bottom:20px}
.hero-sub{font-size:19px;font-weight:300;color:var(--text-secondary);max-width:460px;margin:0 auto 36px;line-height:1.7}
.hero-cta{display:inline-block;background:var(--accent);color:#fff;font-family:var(--body);font-size:16px;font-weight:600;padding:15px 34px;border-radius:var(--radius-sm);text-decoration:none;transition:all 0.2s ease;cursor:pointer;border:none}
.hero-cta:hover{background:var(--accent-hover);transform:translateY(-2px)}
.hero-hint{margin-top:16px;font-size:13px;color:var(--text-muted);font-weight:400}

/* Hero animations */
.anim-stagger{opacity:0;transform:translateY(20px);animation:fadeUp .7s var(--ease) forwards}
.d1{animation-delay:0s}.d2{animation-delay:0.1s}.d3{animation-delay:0.2s}.d4{animation-delay:0.3s}.d5{animation-delay:0.4s}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}

/* Scroll animations */
.scroll-anim { opacity: 0; transform: translateY(16px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.scroll-anim.in-view { opacity: 1; transform: translateY(0); }
.scroll-anim.d1 { transition-delay: 0.08s; }
.scroll-anim.d2 { transition-delay: 0.16s; }

/* === SOCIAL PROOF === */
.social-proof {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
  text-align: center;
}
.social-proof p { font-family: var(--body); font-weight: 400; font-size: 14px; color: var(--text-secondary); }

/* === FEATURE STRIP === */
.features{padding:100px 24px; max-width: 1080px; margin: 0 auto;}
.features-header { text-align: center; margin-bottom: 48px; }
.features-header h2 { font-family: var(--head); font-style: italic; font-size: 40px; color: var(--text-primary); margin-bottom: 16px; }
.features-header p { font-family: var(--body); font-weight: 300; font-size: 17px; color: var(--text-secondary); max-width: 440px; margin: 0 auto; }

.features-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:20px}
.feature-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:32px 28px;transition:all 0.25s ease;}
.feature-card:hover{border-color:rgba(232,87,42,0.3);box-shadow:0 4px 24px rgba(0,0,0,0.06)}
.feature-icon{color:var(--accent);margin-bottom:16px}
.feature-card h3{font-family: var(--body); font-size:17px;font-weight:600;color:var(--text-primary);margin-bottom:8px}
.feature-card p{font-size:14px;font-weight:400;color:var(--text-secondary);line-height:1.7}


/* === UPLOAD SECTION === */
.upload-wrapper{padding:100px 24px; max-width: 1080px; margin: 0 auto;}
.upload-container{max-width:680px;margin:0 auto;text-align:center;}

.section-label{display:block;font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.1em;color:var(--accent);text-transform:uppercase;margin-bottom:16px}
.section-heading{font-family:var(--head);font-style:italic;font-size:36px;font-weight:600;color:var(--text-primary);margin-bottom:32px;}
.section-heading-small{font-family:var(--head);font-style:italic;font-size:28px;font-weight:600;color:var(--text-primary);margin-bottom:24px; text-align:left;}

/* Tabs */
.tab-switcher{display:flex;gap:4px;margin-bottom:24px;background:var(--bg);border-radius:var(--radius-sm);padding:4px;border:1px solid var(--border)}
.tab{flex:1;padding:12px 16px;border:none;background:transparent;font-family:var(--body);font-size:14px;font-weight:500;color:var(--text-secondary);cursor:pointer;border-radius:8px;transition:all .2s ease}
.tab:hover{color:var(--text-primary)}
.tab.active{background:var(--surface);color:var(--text-primary);box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.tab-content{display:none; text-align:left;}.tab-content.active{display:block}

/* Drop zone */
.drop-zone{background:var(--surface);border:1.5px dashed var(--border);border-radius:16px;padding:56px 40px;text-align:center;cursor:pointer;transition:all .2s ease}
.drop-zone:hover,.drop-zone.drag-over{border-color:var(--accent);background:rgba(232,87,42,0.03)}
.drop-zone-icon{color:var(--text-muted);margin-bottom:16px;transition:color .2s ease}
.drop-zone:hover .drop-zone-icon,.drop-zone.drag-over .drop-zone-icon{color:var(--accent)}
.drop-zone-primary{font-family:var(--body);font-weight:500;font-size:16px;color:var(--text-primary);margin-bottom:4px}
.drop-zone-secondary{font-family:var(--body);font-size:13px;color:var(--text-muted)}

/* Upload Progress */
.upload-progress-container { margin-top: 16px; background: var(--surface); padding: 16px 20px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.upload-progress-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.upload-file-name { font-family: var(--body); font-size: 14px; font-weight: 500; color: var(--text-primary); }
.upload-progress-text { font-family: var(--body); font-size: 13px; color: var(--text-secondary); }
.upload-progress-bar-bg { width: 100%; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.upload-progress-bar-fill { height: 100%; width: 0%; background: var(--accent); border-radius: 2px; transition: width 0.1s linear; }

/* File selected pill */
.file-selected{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;margin-top:16px;background:rgba(232,87,42,0.06);border:1px solid rgba(232,87,42,0.2);border-radius:var(--radius-sm)}
.file-pill{display:flex;align-items:center;gap:10px;font-family:var(--body);font-size:14px;font-weight:500;color:var(--accent)}
.file-pill svg{color:var(--accent)}
.remove-file{background:none;border:none;cursor:pointer;color:var(--text-muted);padding:4px;transition:color .2s ease}
.remove-file:hover{color:var(--danger)}

/* URL input */
.url-label{display:block;font-family:var(--body);font-weight:400;font-size:13px;color:var(--text-secondary);margin-bottom:8px}
.url-input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:13px 16px;font-family:var(--body);font-size:15px;color:var(--text-primary);outline:none;transition:border-color .2s ease}
.url-input::placeholder{color:var(--text-muted)}
.url-input:focus{border-color:var(--accent)}
.url-hint{font-size:13px;color:var(--text-muted);margin-top:8px}

/* Deck type */
.deck-type-wrapper{margin:24px 0; text-align:left;}
.select-wrapper{position:relative}
.deck-type-select{width:100%;padding:13px 44px 13px 16px;border:1px solid var(--border);border-radius:10px;font-family:var(--body);font-size:15px;color:var(--text-primary);background:var(--bg);cursor:pointer;appearance:none;-webkit-appearance:none;outline:none;transition:border-color .2s ease}
.deck-type-select option{background:var(--surface);color:var(--text-primary)}
.deck-type-select:focus{border-color:var(--accent)}
.select-chevron{position:absolute;right:16px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--text-muted)}

/* Analyze button */
.analyze-btn{width:100%;padding:15px;border:none;border-radius:10px;background:var(--accent);color:#fff;font-family:var(--body);font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:10px}
.analyze-btn:not(:disabled):hover{background:var(--accent-hover);transform:translateY(-1px)}
.analyze-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* === LOADING SECTION === */
.loading-section { padding: 100px 24px; display: flex; justify-content: center; }
.loading-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 56px 48px; text-align: center; max-width: 480px; width: 100%; }
.loading-spinner { width: 56px; height: 56px; margin: 0 auto 24px; animation: loadSpin 1s linear infinite; stroke: var(--accent); }
@keyframes loadSpin { 100% { transform: rotate(360deg); } }
.loading-card h3 { font-family: var(--body); font-weight: 500; font-size: 17px; color: var(--text-primary); margin-bottom: 12px; }
.loading-message-container { height: 24px; position: relative; overflow: hidden; }
.loading-message { font-family: var(--body); font-weight: 400; font-size: 14px; color: var(--text-secondary); transition: opacity 0.3s ease; position: absolute; width: 100%; text-align: center; }
.loading-message.fade-out { opacity: 0; }

/* Error toast */
.error-toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid rgba(192,57,43,0.3);border-radius:var(--radius-sm);padding:14px 20px;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--danger);z-index:1000;animation:toastIn .3s ease;max-width:560px}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(12px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* === RESULTS === */
.results-section{padding:100px 24px;animation:fadeUp .6s var(--ease)}
.results-container{max-width:1080px;margin:0 auto}

/* Overall score card */
.overall-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:40px 48px;margin-bottom:56px}
.overall-top{display:flex;align-items:center;gap:40px;margin-bottom:24px}
.overall-score-display{display:flex;align-items:baseline;gap:4px}
.score-number{font-family:var(--head);font-size:80px;font-weight:700;line-height:1}
.overall-meta h2{font-family:var(--body);font-size:22px;font-weight:600;color:var(--text-primary);margin-bottom:4px}
.overall-meta p{font-size:14px;color:var(--text-secondary)}
.overall-divider{height:1px;background:var(--border);margin-bottom:20px}
.overall-verdict{font-size:15px;font-weight:400;font-style:italic;color:var(--text-secondary);line-height:1.65}

/* Score coloring classes */
.score-green{color:var(--success)} .score-yellow{color:var(--warning)} .score-red{color:var(--danger)}
.border-green{border-left:3px solid var(--success) !important; border-top-left-radius: 0; border-bottom-left-radius: 0;}
.border-yellow{border-left:3px solid var(--warning) !important; border-top-left-radius: 0; border-bottom-left-radius: 0;}
.border-red{border-left:3px solid var(--danger) !important; border-top-left-radius: 0; border-bottom-left-radius: 0;}
.fill-green{background:var(--success)} .fill-yellow{background:var(--warning)} .fill-red{background:var(--danger)}
.text-green{color:var(--success)} .text-yellow{color:var(--warning)} .text-red{color:var(--danger)}

/* Dimensions */
.dimensions-section{margin-bottom:56px}
.dimensions-grid{display:flex;flex-direction:column;gap:12px}
.dim-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px 32px;animation:fadeUp .5s var(--ease) both}
.dim-card:nth-child(1){animation-delay:.1s}.dim-card:nth-child(2){animation-delay:.2s}.dim-card:nth-child(3){animation-delay:.3s}.dim-card:nth-child(4){animation-delay:.4s}.dim-card:nth-child(5){animation-delay:.5s}
.dim-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.dimension-name{font-family:var(--body);font-size:15px;font-weight:500;color:var(--text-primary);flex:1}
.dimension-score{font-family:var(--body);font-size:26px;font-weight:600;}
.progress-bar{height:3px;background:#f0f0ec;border-radius:2px;overflow:hidden}
.progress-fill{height:100%;width:0;border-radius:2px;transition:width .7s ease-out}

/* Dimension Details */
.dim-details { margin-top: 16px; display: none; flex-direction: column; gap: 12px; }
.dim-details.show { display: flex; animation: fadeUp 0.3s ease; }
.dim-why { font-family: var(--body); font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
.dim-meta { display: flex; gap: 16px; font-family: var(--body); font-size: 13px; color: var(--text-secondary); }
.dim-meta span { display: inline-flex; align-items: center; gap: 6px; }
.dim-rec { font-family: var(--body); font-size: 14px; font-weight: 500; color: var(--text-primary); padding: 12px 16px; background: var(--bg); border-radius: 8px; border: 1px solid var(--border); margin-top: 4px; }
.dim-rec::before { content: "Recommendation: "; color: var(--accent); }

/* Problems */
.problems-section{margin-bottom:56px}
.problems-list{display:flex;flex-direction:column;gap:12px}
.problem-item{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:32px;animation:fadeUp .4s var(--ease) both}
.problem-item:nth-child(1){animation-delay:.15s}.problem-item:nth-child(2){animation-delay:.3s}.problem-item:nth-child(3){animation-delay:.45s}
.problem-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.problem-badge{padding:6px 12px;background:rgba(192,57,43,0.06);color:var(--danger);font-family:var(--body);font-size:12px;font-weight:600;border-radius:6px;white-space:nowrap}
.problem-slide-title{font-family:var(--body);font-size:16px;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.problem-issue{font-family:var(--body);font-size:14px;color:var(--text-secondary);line-height:1.7;margin-bottom:20px}
.problem-issue::before{content:"→ ";color:var(--danger); font-weight:bold;}

/* Fix button */
.fix-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border:1px solid var(--border);background:var(--surface);color:var(--text-primary);font-family:var(--body);font-size:14px;font-weight:500;border-radius:8px;cursor:pointer;transition:all .2s ease}
.fix-btn:hover{border-color:var(--accent);color:var(--accent)}
.fix-btn:disabled{opacity:.4;cursor:not-allowed}
.fix-btn .fix-spinner{width:14px;height:14px;border:2px solid rgba(0,0,0,0.1);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}

/* Fix result */
.fix-result{margin-top:20px;padding:24px;background:rgba(42,122,75,0.04);border:1px solid rgba(42,122,75,0.2);border-radius:12px;animation:fadeUp .3s ease}
.fix-result-header{display:flex;align-items:center;gap:8px;font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--success);margin-bottom:16px}
.fix-result-title{font-family:var(--body);font-size:16px;font-weight:600;color:var(--text-primary);margin-bottom:10px}
.fix-result-content{font-family:var(--body);font-size:14px;color:var(--text-secondary);line-height:1.7;white-space:pre-line;margin-bottom:16px;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:8px}
.fix-result-explanation{font-family:var(--body);font-size:13px;color:var(--text-muted);font-style:italic}

/* Secondary button */
.secondary-btn{display:flex;align-items:center;justify-content:center;width:100%;max-width:320px;margin:0 auto;padding:15px 24px;border:1px solid var(--border);background:var(--surface);color:var(--text-primary);font-family:var(--body);font-size:15px;font-weight:500;cursor:pointer;border-radius:10px;transition:all .2s ease}
.secondary-btn:hover{background:var(--bg);border-color:var(--accent);color:var(--accent)}

/* === RESPONSIVE === */
@media(max-width:768px){
  .hero-blob{width:300px;height:300px;right:-50px}
  .features-grid{grid-template-columns:1fr;gap:20px}
  .overall-top{flex-direction:column;text-align:center;gap:16px}
  .overall-card{padding:32px 24px}
  .score-number{font-size:64px}
  .section-heading{font-size:30px}
  .features-header h2 { font-size: 32px; }
}