/* ===================== ROOT & RESET ===================== */
:root {
  --bg: #f6f6f6;
  --bg2: #ffffff;
  --accent: #71a531;
  --accent2: #5a8a28;
  --text: #333333;
  --text2: #1a1a1a;
  --success: #51cf66;
  --card: #ffffff;
  --border: #e0e0e0;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:'Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  line-height:1.5;
}

/* ===================== BACKGROUND ===================== */
.bg-mesh {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(113,165,49,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 60%, rgba(90,138,40,0.04) 0%, transparent 60%);
}

/* ===================== HEADER ===================== */
header {
  position:relative; z-index:10;
  padding:2rem 1.5rem 1rem; text-align:center;
  border-bottom:1px solid var(--border);
  background:#f6f6f6;
  backdrop-filter:blur(10px);
}
header h1 {
  font-size:2.2rem; font-weight:800;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
header p { margin-top:0.5rem; font-size:0.95rem; color:var(--text); }
.badge {
  display:inline-flex; align-items:center; gap:6px; margin-top:0.8rem;
  padding:4px 14px;
  background:rgba(113,165,49,0.1); border:1px solid rgba(113,165,49,0.25);
  border-radius:999px; font-size:0.78rem; color:var(--accent);
}
.badge::before {
  content:''; width:7px; height:7px; background:var(--success);
  border-radius:50%; box-shadow:0 0 8px var(--success);
}

/* ===================== MODE TOGGLE (Images / Videos) ===================== */
.mode-toggle-wrap { text-align:center; position:relative; z-index:10; margin:-1rem auto 1.5rem; }
.mode-toggle {
  display:inline-flex; gap:4px; padding:4px;
  background:#eaeaea; border-radius:999px;
  margin:1rem auto 0;
}
.mode-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:0.5rem 1.2rem; border-radius:999px;
  font-size:0.85rem; font-weight:700; text-decoration:none;
  color:#555; background:transparent; border:none;
  cursor:pointer; transition:all 0.2s;
}
.mode-btn:hover:not(.mode-btn-active) { color:var(--accent2); }
.mode-btn-active {
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff; box-shadow:0 4px 16px rgba(113,165,49,0.3);
}

/* ===================== CONTAINER ===================== */
.container {
  position:relative; z-index:10;
  max-width:1100px; margin:0 auto; padding:1.5rem;
}

/* ===================== DROPZONE ===================== */
.dropzone {
  border:2px dashed var(--accent); border-radius:16px;
  padding:3rem 2rem; text-align:center; background:rgba(113,165,49,0.03);
  transition:all 0.3s; cursor:pointer; position:relative; overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,0.04);
}
.dropzone:hover, .dropzone.dragover {
  transform:scale(1.005);
}
.dropzone:hover h3, .dropzone:hover p, .dropzone:hover .dropzone-title,
.dropzone.dragover h3, .dropzone.dragover p, .dropzone.dragover .dropzone-title {
  color: var(--accent);
}
.dropzone-icon {
  width:64px; height:64px; margin:0 auto 1rem;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-radius:16px; display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; color:#fff;
  box-shadow:0 8px 32px rgba(113,165,49,0.2);
}
.dropzone p { font-size:0.85rem; color:var(--text); }
.dropzone input { display:none; }

/* ===================== PREVIEW ===================== */
.preview-area {
  margin-top:1.5rem; display:none;
  background-color:#f2f2f2;
  background-image:
    linear-gradient(45deg, #e2e2e2 25%, transparent 25%),
    linear-gradient(-45deg, #e2e2e2 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e2e2e2 75%),
    linear-gradient(-45deg, transparent 75%, #e2e2e2 75%);
  background-size:24px 24px;
  background-position:0 0, 0 12px, 12px -12px, -12px 0px;
  border:1px solid var(--border);
  border-radius:16px; padding:1.2rem;
  box-shadow:0 2px 12px rgba(0,0,0,0.04);
}
.preview-area.visible { display:block; animation:fadeIn 0.4s ease; }
.compare-wrap {
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
}
@media(max-width:700px){ .compare-wrap { grid-template-columns:1fr; } }
.compare-box {
  background:var(--bg); border-radius:12px; overflow:hidden;
  border:1px solid var(--border); position:relative;
}
.compare-box .label {
  position:absolute; top:10px; left:10px;
  background:rgba(0,0,0,0.7); padding:3px 10px;
  border-radius:6px; font-size:0.72rem; font-weight:700;
  color:#fff; z-index:5; backdrop-filter:blur(4px);
}
.compare-box canvas, .compare-box video {
  display:block; width:100%; height:auto; max-height:500px; object-fit:contain; background:#000;
}
.processing-overlay {
  position:absolute; inset:0; z-index:5;
  display:none; align-items:center; justify-content:center;
  flex-direction:column; gap:0.7rem;
  background:rgba(0,0,0,0.55); color:#fff;
}
.processing-overlay.visible { display:flex; }
.processing-overlay .spinner {
  width:34px; height:34px; border-radius:50%;
  border:3px solid rgba(255,255,255,0.3); border-top-color:#fff;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.wm-progress-wrap {
  margin-top:1rem; background:var(--bg); border:1px solid var(--border);
  border-radius:10px; padding:0.9rem 1rem;
}
.wm-progress-bar-track {
  width:100%; height:8px; border-radius:999px; background:var(--border); overflow:hidden;
}
.wm-progress-bar-fill {
  height:100%; width:0%; border-radius:999px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  transition:width 0.2s ease;
}
.wm-progress-text {
  margin-top:0.5rem; font-size:0.8rem; color:var(--text2); text-align:center;
}

/* ===================== BUTTONS ===================== */
.controls {
  display:flex; gap:0.7rem; flex-wrap:wrap; justify-content:center; margin-top:1.2rem;
}
.btn {
  padding:0.6rem 1.4rem; border-radius:10px; border:none;
  font-size:0.85rem; font-weight:700; cursor:pointer;
  transition:all 0.2s; display:inline-flex; align-items:center; gap:6px;
}
/* Primary = bright green like cookie Accept */
.btn-primary {
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff; box-shadow:0 4px 20px rgba(113,165,49,0.25);
}
.btn-primary:hover {
  transform:translateY(-1px); box-shadow:0 6px 28px rgba(113,165,49,0.35);
}
.btn-primary:disabled { opacity:0.5; cursor:not-allowed; transform:none; }
/* Secondary = same green as cookie Accept button */
.btn-secondary {
  background-color:rgba(113,165,49,1); color:#fff;
  box-shadow:0 4px 20px rgba(113,165,49,0.25);
}
.btn-secondary:hover {
  background-color:#5a8a28; transform:translateY(-1px);
  box-shadow:0 6px 28px rgba(113,165,49,0.35);
}

/* ===================== ANIMATIONS ===================== */
@keyframes fadeIn {
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* ===================== H3 = H4 (GLOBAL) ===================== */
h3 { color:var(--accent); font-size:0.9rem; margin-bottom:0.4rem; }

/* ===================== INFO CARDS ===================== */
.info-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1rem; margin-top:2rem;
}
.info-card {
  background:#fbfbfb; border:1px solid var(--border);
  border-radius:14px; padding:1.2rem; transition:all 0.3s;
  box-shadow:0 2px 8px rgba(0,0,0,0.03);
}
.info-card:hover { border-color:var(--accent2); transform:translateY(-2px); }
.info-card h4 { color:var(--accent); font-size:0.9rem; margin-bottom:0.4rem; }
.info-card p { font-size:0.82rem; line-height:1.5; color:var(--text); }

/* ===================== SECTIONS ===================== */
.section { margin-top:3rem; }
.section h2 {
  font-size:1.6rem; color:var(--text2); margin-bottom:0.8rem; text-align:center;
}
.section > p {
  text-align:center; color:var(--text); max-width:700px;
  margin:0 auto 1.5rem; font-size:0.9rem; line-height:1.6;
}

/* ===================== STEPS ===================== */
.steps {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.2rem; margin-top:1rem;
}
.step {
  background:#fbfbfb; border:1px solid var(--border);
  border-radius:14px; padding:1.5rem; text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,0.03);
}
.step-num {
  width:36px; height:36px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#fff; margin:0 auto 0.8rem; font-size:1rem;
}
.step h3 { color:var(--text2); font-size:1rem; }
.dropzone-title { color:var(--text2); font-size:1.1rem; font-weight:700; margin-bottom:0.4rem; }
.step p { font-size:0.82rem; color:var(--text); line-height:1.5; }

/* ===================== FEATURE GRID ===================== */
.feat-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1rem; margin-top:1rem;
}
.feat-card {
  background:#fbfbfb; border:1px solid var(--border);
  border-radius:14px; padding:1.2rem;
  box-shadow:0 2px 8px rgba(0,0,0,0.03);
}
.feat-card h3, .feat-card h4 { color:var(--accent); font-size:0.92rem; margin-bottom:0.4rem; }
.feat-card p { font-size:0.82rem; color:var(--text); line-height:1.5; }

/* ===================== FAQ ===================== */
.faq-list { max-width:800px; margin:0 auto; }
.faq-item {
  background:#fbfbfb; border:1px solid var(--border);
  border-radius:12px; margin-bottom:0.6rem; overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,0.03);
}
.faq-q {
  padding:1rem 1.2rem; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
  font-weight:600; color:var(--text2); font-size:0.9rem;
}
.faq-q::after {
  content:'▼'; font-size:0.7rem; color:var(--accent);
  transition:transform 0.3s;
}
.faq-item.open .faq-q::after { transform:rotate(180deg); }
.faq-a {
  padding:0 1.2rem; max-height:0; overflow:hidden;
  transition:all 0.3s ease; color:var(--text);
  font-size:0.85rem; line-height:1.6;
}
.faq-item.open .faq-a { padding-bottom:1rem; max-height:600px; }

/* ===================== CTA ===================== */
.cta-section {
  text-align:center; margin-top:3rem; padding:2.5rem 1.5rem;
  background:linear-gradient(135deg,rgba(113,165,49,0.08),rgba(90,138,40,0.05));
  border-radius:20px; border:1px solid var(--border);
}
.cta-section h2 { font-size:1.8rem; color:var(--text2); margin-bottom:0.5rem; }
.cta-section p { color:var(--text); font-size:0.95rem; }

/* ===================== FOOTER ===================== */
footer {
  text-align:center; padding:2rem 1rem; font-size:0.78rem;
  color:rgba(51,51,51,0.5); border-top:none;
  margin-top:2rem; position:relative; z-index:10;
}
footer a { color:var(--accent2); text-decoration:none; }
footer a:hover { text-decoration:underline; }

/* ===================== LANGUAGE MODAL ===================== */
.lang-modal {
  display:none; position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,0.5); align-items:center; justify-content:center;
}
.lang-modal.active { display:flex; }
.lang-modal-content {
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:1.5rem; max-width:700px;
  width:90%; box-shadow:0 20px 60px rgba(0,0,0,0.15);
}
.lang-modal-header {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:1rem;
}
.lang-modal-header h3 { color:var(--text2); }
.lang-close {
  background:none; border:none; color:var(--text);
  font-size:1.5rem; cursor:pointer;
}
/* 4 columns on desktop, no scroll */
.lang-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:0.5rem;
}
.lang-link {
  display:block; padding:0.6rem; border-radius:8px;
  color:var(--text); text-decoration:none; font-size:0.85rem;
  border:1px solid transparent; transition:all 0.2s;
}
.lang-link:hover { background:var(--bg); border-color:var(--border); }
.lang-link.active {
  background:rgba(113,165,49,0.1); border-color:var(--accent); color:var(--accent);
}

/* ===================== COOKIE BANNER ===================== */
.cookie-banner {
  position:fixed; bottom:15px; left:50%; transform:translateX(-50%);
  background:#ffffff; box-shadow:0 8px 25px rgba(0,0,0,0.12);
  border-radius:12px; padding:12px 16px;
  width:calc(100% - 30px); max-width:520px;
  z-index:99999; font-family:sans-serif; box-sizing:border-box;
}
.cookie-content {
  display:flex; flex-direction:column; gap:10px;
}
.cookie-content p {
  font-size:13px; color:#333333; line-height:1.4; margin:0; text-align:left;
}
.cookie-content a { color:rgba(113,165,49,1); text-decoration:underline; }
.cookie-buttons {
  display:flex; gap:8px; justify-content:flex-end;
}
.cookie-btn {
  height:auto; min-height:0; min-width:0; line-height:normal;
  padding:6px 14px; font-size:12.5px; font-weight:bold;
  border-radius:6px; cursor:pointer; border:none; outline:none;
  box-shadow:none; text-decoration:none;
  transition:background 0.3s, transform 0.2s;
}
.cookie-btn-accept {
  background-color:rgba(113,165,49,1); color:#fff;
}
.cookie-btn-accept:hover {
  background-color:#5a8a28; transform:scale(1.02);
}
.cookie-btn-reject {
  background-color:#f0f0f0; color:#666666;
  border:1px solid #ddd;
}
.cookie-btn-reject:hover {
  background-color:#e2e8f0; transform:scale(1.02);
}

/* ===================== PRIVACY PAGE ===================== */
.privacy-content {
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:2rem;
  box-shadow:0 2px 12px rgba(0,0,0,0.04);
}
.privacy-content h2 {
  color:var(--text2); font-size:1.2rem;
  margin-top:1.5rem; margin-bottom:0.5rem;
}
.privacy-content h2:first-child { margin-top:0; }
.privacy-content p {
  color:var(--text); font-size:0.9rem; margin-bottom:0.8rem;
}
.privacy-content a { color:var(--accent2); }

/* ===================== RESPONSIVE ===================== */
@media(max-width:480px){
  .cookie-banner { bottom:10px; padding:10px 12px; }
  .cookie-buttons { flex-direction:row; }
  .cookie-btn { flex:1; text-align:center; padding:6px 10px; }
  header h1 { font-size:1.7rem; }
  .section h2 { font-size:1.3rem; }
  .cta-section h2 { font-size:1.4rem; }
  /* 2 columns on mobile */
  .lang-grid { grid-template-columns:repeat(2,1fr); }
  .lang-modal-content { max-width:360px; }
}

/* Footer language button - gray pill */
.lang-btn-footer {
  display:inline-flex; align-items:center; gap:0;
  padding:4px 12px; background:#eaeaea; border-radius:8px;
  color:#333; font-size:0.78rem; cursor:pointer; border:none;
  margin-left:10px; vertical-align:middle;
  font-family:inherit;
}
.lang-btn-footer:hover { background:#ddd; }