/* ============================================================
   TRANSLATE PANDA — style.css
   Layout: Dark hero → light sections → dark donate/download/footer
   Green accent: hero download button + donate section only
============================================================ */

:root {
  /* ── Dark section palette (hero, donate, download, footer) ── */
  --d-bg:        #080808;
  --d-bg2:       #111111;
  --d-card:      #161616;
  --d-border:    #242424;
  --d-border2:   #303030;
  --d-text:      #ececec;
  --d-body:      #aaaaaa;
  --d-muted:     #666666;

  /* ── Light section palette (all other sections) ── */
  --l-bg:        #ffffff;
  --l-alt:       #f7f7f7;
  --l-card:      #ffffff;
  --l-border:    #e8e8e8;
  --l-border2:   #d4d4d4;
  --l-text:      #0d0d0d;
  --l-body:      #444444;
  --l-muted:     #888888;
  --l-shadow:    0 2px 12px rgba(0,0,0,.07);
  --l-shadow-md: 0 6px 28px rgba(0,0,0,.1);
  --l-shadow-lg: 0 14px 50px rgba(0,0,0,.12);

  /* ── Green (hero download + donate ONLY) ── */
  --green:       #2a8a58;
  --green-h:     #34a86c;
  --green-glow:  rgba(42,138,88,.28);
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Poppins', sans-serif;
  background: var(--l-bg);
  color: var(--l-body);
  overflow-x: hidden;
  line-height: 1.75;
}

::selection { background: #111; color: #fff; }
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: #f0f0f0; }
::-webkit-scrollbar-thumb { background: #bbb; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #888; }

/* ── Shared link style ── */
.link-dark { color: var(--l-text); font-weight: 600; text-decoration: underline; }
.link-dark:hover { color: #333; }
.link-light { color: var(--d-text); font-weight: 600; text-decoration: underline; }
.link-light:hover { color: #fff; }

/* ── Section label pill ── */
.section-label {
  display: inline-block;
  font-size: .71rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  border-radius: 20px;
  padding: 3px 14px;
  margin-bottom: 1rem;
}
.section-label.dark  { color: var(--d-muted);  border: 1px solid var(--d-border2); background: var(--d-card); }
.section-label.light { color: var(--l-muted);  border: 1px solid var(--l-border2); background: var(--l-alt); }

/* ── Section title & body ── */
.section-title { font-size: clamp(1.75rem, 3.5vw, 2.55rem); font-weight: 800; line-height: 1.17; margin-bottom: 1rem; letter-spacing: -.025em; }
.title-dark  { color: #ffffff; }
.title-light { color: var(--l-text); }

.section-body { font-size: 1rem; line-height: 1.8; }
.body-dark  { color: var(--d-body); }
.body-light { color: var(--l-body); }

/* ── Buttons ── */
.btn-dark {
  background: var(--l-text);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  padding: .6rem 1.4rem;
  font-size: .95rem;
  transition: all .22s;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.btn-dark:hover { background: #333; color: #fff; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.2); }

.btn-outline-dark {
  background: transparent;
  color: var(--l-text);
  border: 1.5px solid var(--l-border2);
  border-radius: 10px;
  font-weight: 600;
  padding: .55rem 1.3rem;
  font-size: .9rem;
  transition: all .22s;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.btn-outline-dark:hover { background: var(--l-text); color: #fff; border-color: var(--l-text); }

.btn-light {
  background: #fff;
  color: #0d0d0d;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  padding: .6rem 1.4rem;
  font-size: .95rem;
  transition: all .22s;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.btn-light:hover { background: #e8e8e8; color: #000; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,255,255,.15); }

.btn-outline-light {
  background: transparent;
  color: #ccc;
  border: 1.5px solid #333;
  border-radius: 10px;
  font-weight: 600;
  padding: .55rem 1.3rem;
  font-size: .9rem;
  transition: all .22s;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.btn-outline-light:hover { background: #1a1a1a; color: #fff; border-color: #444; }

/* Green (download only) */
.btn-green {
  background: linear-gradient(135deg, var(--green), var(--green-h));
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  padding: .6rem 1.4rem;
  font-size: .95rem;
  transition: all .22s;
  box-shadow: 0 4px 18px var(--green-glow);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.btn-green:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 10px 32px var(--green-glow); }

/* ============================================================
   NAVBAR
============================================================ */
#mainNav {
  background: transparent;
  padding: 1.1rem 0;
  transition: background .3s, padding .3s, box-shadow .3s;
  z-index: 1000;
}
#mainNav.scrolled {
  background: rgba(8,8,8,.97);
  backdrop-filter: blur(14px);
  padding: .65rem 0;
  box-shadow: 0 1px 0 #1a1a1a;
}

.nav-panda-icon {
  width: 36px; height: 36px;
  background: #1a1a1a;
  border: 1.5px solid #333;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nav-panda-icon.small { width: 28px; height: 28px; }
.nav-panda-icon svg { width: 100%; height: 100%; }

.brand-text { font-family:'Nunito',sans-serif; font-weight:800; font-size:1.2rem; color:#fff; letter-spacing:-.02em; }
.brand-accent { color:#aaa; }

.navbar-nav .nav-link { color:rgba(255,255,255,.72); font-size:.875rem; font-weight:500; padding:.4rem .75rem!important; border-radius:7px; transition:all .18s; }
.navbar-nav .nav-link:hover { color:#fff; background:rgba(255,255,255,.08); }

/* ============================================================
   HERO  ← DARK
============================================================ */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center;
  background: var(--d-bg);
  overflow: hidden;
  padding: 100px 0 90px;
}
.hero-section::before {
  content:'';
  position: absolute; inset:0;
  background: radial-gradient(ellipse 65% 50% at 50% 0%, rgba(255,255,255,.04) 0%, transparent 70%);
  pointer-events: none;
}

/* Bamboo decoration — green */
.bamboo-left, .bamboo-right {
  position: absolute; top:0; bottom:0; width:160px;
  pointer-events: none; z-index:0; opacity:.7;
}
.bamboo-left  { left:0; }
.bamboo-right { right:0; }

.bamboo-stalk {
  position: absolute; bottom:0; width:14px;
  background: repeating-linear-gradient(to top,#1b5e38 0,#2d8a55 16px,#3ea96a 20px,#52b788 23px,#2d8a55 27px,#1b5e38 40px,#1b5e38 42px);
  border-radius:7px;
  box-shadow: inset -2px 0 4px rgba(0,0,0,.25);
  animation: bamboosway 7s ease-in-out infinite;
  transform-origin: bottom center;
}
@keyframes bamboosway { 0%,100%{transform:rotate(0)} 30%{transform:rotate(.7deg)} 70%{transform:rotate(-.5deg)} }

.bamboo-leaves { position:absolute; width:60px; height:30px; pointer-events:none; }
.bamboo-leaves::before, .bamboo-leaves::after {
  content:''; position:absolute; width:46px; height:15px;
  background: linear-gradient(135deg, #2d8a55, #52b788);
  border-radius:0 100% 0 100%;
  animation: leafsway 5.5s ease-in-out infinite;
}
.bamboo-leaves.left::before  { transform:rotate(-30deg); top:0; left:10px; }
.bamboo-leaves.left::after   { transform:rotate(-50deg); top:12px; left:0; animation-delay:.5s; }
.bamboo-leaves.right::before { transform:rotate(30deg);  top:0;  right:10px; }
.bamboo-leaves.right::after  { transform:rotate(50deg);  top:12px; right:0; animation-delay:.5s; }
@keyframes leafsway { 0%,100%{opacity:1} 50%{opacity:.5} }

.grass-bottom {
  position:absolute; bottom:-2px; left:0; right:0; height:60px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60'%3E%3Cpath fill='%23ffffff' d='M0 60 C200 28 420 10 640 35 C860 60 1080 15 1280 30 C1350 37 1400 44 1440 38 L1440 60 Z'/%3E%3C/svg%3E") no-repeat bottom;
  background-size:cover; pointer-events:none;
}

.hero-content { position:relative; z-index:1; }

.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--d-card); border:1px solid var(--d-border2); border-radius:30px;
  padding:5px 18px; font-size:.8rem; color:#aaa; font-weight:500;
}
.badge-dot { width:7px; height:7px; border-radius:50%; background:#fff; animation:blink 2s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }

.hero-title { font-size:clamp(2.2rem,4.5vw,3.5rem); font-weight:900; color:#fff; line-height:1.08; margin-bottom:1.2rem; letter-spacing:-.03em; }
.hero-title .accent-line { color:#cccccc; }

.hero-subtitle { font-size:clamp(.95rem,1.6vw,1.07rem); color:#777; max-width:540px; margin:0 0 1.8rem; line-height:1.8; }
.hero-subtitle strong { color:#ddd; font-weight:600; }

/* ── Interactive Demo Widget ── */
.hero-demo {
  display: flex;
  flex-direction: column;
  gap: 0;
  filter: drop-shadow(0 24px 60px rgba(0,0,0,.6));
}

/* Post card */
.demo-card {
  background: #161616;
  border: 1px solid #2a2a2a;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  transition: filter .35s ease;
}
.demo-card.translating {
  filter: blur(3px) brightness(.7);
}

.demo-card-bar {
  background: #1e1e1e;
  border-bottom: 1px solid #2a2a2a;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.demo-dot { width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.demo-dot.red    { background:#ff5f57; }
.demo-dot.yellow { background:#febc2e; }
.demo-dot.green  { background:#28c840; }
.demo-url {
  flex: 1;
  margin-left: 10px;
  font-size: .72rem;
  color: #555;
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-wp-badge { color: #3a9e6f; font-size: 1rem; }

.demo-card-body { padding: 1.75rem 2rem; }

.demo-post-tag {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #3a9e6f;
  margin-bottom: .75rem;
}

.demo-post-title {
  font-size: 1.18rem;
  font-weight: 800;
  color: #f0f0f0;
  line-height: 1.3;
  margin-bottom: .85rem;
  transition: opacity .2s;
  min-height: 2.8rem;
}

.demo-post-excerpt {
  font-size: .88rem;
  color: #888;
  line-height: 1.7;
  margin-bottom: 1.1rem;
  transition: opacity .2s;
  min-height: 5rem;
}

.demo-post-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: .75rem;
  color: #555;
}
.demo-post-meta span { display:flex; align-items:center; gap:5px; }
.demo-translated-badge {
  color: #3a9e6f;
  font-weight: 700;
}

/* RTL support for Arabic */
.demo-card-body.rtl .demo-post-title,
.demo-card-body.rtl .demo-post-excerpt { direction: rtl; text-align: right; }

/* Translate bar */
.demo-translate-bar {
  background: #111;
  border-left: 1px solid #2a2a2a;
  border-right: 1px solid #2a2a2a;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.demo-translate-label {
  font-size: .75rem;
  font-weight: 600;
  color: #555;
  white-space: nowrap;
}
.demo-lang-btns { display:flex; flex-wrap:wrap; gap:6px; }

.demo-lang-btn {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  color: #888;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s ease;
  white-space: nowrap;
}
.demo-lang-btn:hover {
  background: #252525;
  color: #ccc;
  border-color: #3a3a3a;
  transform: translateY(-1px);
}
.demo-lang-btn.active {
  background: #3a9e6f;
  border-color: #3a9e6f;
  color: #fff;
}
.demo-lang-btn.loading {
  opacity: .5;
  pointer-events: none;
}

/* Status bar */
.demo-status-bar {
  background: #0d0d0d;
  border: 1px solid #2a2a2a;
  border-top: none;
  border-radius: 0 0 16px 16px;
  padding: .7rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .76rem;
  color: #555;
  font-weight: 500;
  min-height: 38px;
}
.demo-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background .3s;
}
.demo-status-dot.idle        { background: #333; }
.demo-status-dot.working     { background: #febc2e; animation: blink .8s ease-in-out infinite; }
.demo-status-dot.done        { background: #3a9e6f; }

/* Translating overlay spinner on card */
.demo-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s;
}
.demo-card-wrap {
  position: relative;
}
.demo-card-wrap.translating .demo-overlay { opacity: 1; }

@keyframes spin { to{transform:rotate(360deg)} }


/* Hero download button — GREEN */
.btn-download {
  position:relative; display:inline-block;
  background:linear-gradient(135deg,var(--green),var(--green-h));
  color:#fff; font-size:1.08rem; font-weight:700;
  border:none; border-radius:14px; padding:17px 42px;
  cursor:pointer; overflow:hidden;
  transition:transform .2s, box-shadow .2s;
  box-shadow:0 6px 32px var(--green-glow);
  min-width:270px; letter-spacing:.01em;
}
.btn-download:hover { transform:translateY(-3px) scale(1.02); box-shadow:0 14px 44px var(--green-glow); filter:brightness(1.08); }
.btn-download:active { transform:scale(.98); }
.btn-download.large { font-size:1.15rem; padding:20px 52px; border-radius:16px; min-width:330px; }

.download-progress, .download-progress2 {
  position:absolute; bottom:0; left:0; height:3px; width:0%;
  background:rgba(255,255,255,.75); border-radius:0 0 14px 14px; transition:width .06s linear;
}
.download-meta small { color:rgba(255,255,255,.45); }

/* Social proof */
.hero-social-proof { display:flex; align-items:center; flex-wrap:wrap; }
.proof-item { display:flex; flex-direction:column; align-items:center; padding:0 16px; }
.proof-item:first-child { padding-left:0; }
.proof-item strong { font-size:1.3rem; font-weight:800; color:#fff; line-height:1; }
.proof-item span   { font-size:.74rem; color:#555; margin-top:2px; }
.proof-divider     { width:1px; height:28px; background:var(--d-border); }
.stars             { color:#d4a017; font-size:.85rem; }

.scroll-indicator { display:inline-block; margin-top:3rem; color:#444; font-size:1.3rem; text-decoration:none; animation:bounce 2.2s ease-in-out infinite; }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(7px)} }

/* ============================================================
   PROBLEM  ← WHITE
============================================================ */
.section-problem {
  padding: 96px 0;
  background: #fff;
  border-top: 1px solid var(--l-border);
}

.problem-card {
  background: var(--l-alt);
  border: 1px solid var(--l-border);
  border-radius: 18px;
  padding: 2.5rem;
  box-shadow: var(--l-shadow);
}
.problem-chat { border-left:2.5px solid #222; padding-left:1.5rem; }
.chat-bubble { font-family:'Nunito',sans-serif; font-size:1.02rem; color:var(--l-text); font-style:italic; line-height:1.75; }
.chat-meta   { font-size:.8rem; color:var(--l-muted); margin-top:.5rem; }

.stat-row { display:flex; align-items:flex-start; gap:12px; margin-top:1rem; font-size:.93rem; color:var(--l-body); }
.stat-row i    { margin-top:3px; font-size:1rem; flex-shrink:0; color:var(--l-text); }
.stat-row strong { color:var(--l-text); }

/* ============================================================
   SOLUTION  ← LIGHT ALT
============================================================ */
.section-solution {
  padding: 96px 0;
  background: var(--l-alt);
  border-top: 1px solid var(--l-border);
}

.solution-card {
  background: #fff;
  border: 1px solid var(--l-border);
  border-radius: 18px; padding:2.5rem 2rem; height:100%; text-align:center;
  transition:transform .22s, box-shadow .22s;
  box-shadow: var(--l-shadow);
}
.solution-card:hover { transform:translateY(-5px); box-shadow:var(--l-shadow-lg); }
.solution-card.featured { border-color:#1a1a1a; border-width:2px; }
.solution-icon { font-size:2rem; color:var(--l-text); margin-bottom:1rem; }
.solution-card h4 { color:var(--l-text); font-weight:700; }
.solution-card p  { color:var(--l-body); font-size:.93rem; }
.badge-bw {
  display:inline-block; background:#111; color:#fff;
  font-size:.68rem; font-weight:700; padding:3px 12px; border-radius:20px; margin-top:.5rem;
}

/* ============================================================
   FEATURES  ← WHITE
============================================================ */
.section-features {
  padding: 96px 0;
  background: #fff;
  border-top: 1px solid var(--l-border);
}

.feature-card {
  background: #fff;
  border: 1px solid var(--l-border);
  border-radius: 16px; padding:2rem 1.75rem; height:100%;
  position:relative; overflow:hidden;
  transition:transform .22s, box-shadow .22s, border-color .22s;
  box-shadow: var(--l-shadow);
}
.feature-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--l-text); opacity:0; transition:opacity .22s;
}
.feature-card:hover { transform:translateY(-5px); box-shadow:var(--l-shadow-lg); border-color:#bbb; }
.feature-card:hover::before { opacity:1; }

.feature-icon-wrap {
  width:48px; height:48px; background:var(--l-text);
  border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:1.25rem; color:#fff; margin-bottom:1rem;
}
.feature-card h5 { color:var(--l-text); font-weight:700; margin-bottom:.45rem; }
.feature-card p  { color:var(--l-body); font-size:.9rem; margin-bottom:.9rem; }
.feature-tag {
  display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--l-muted); background:var(--l-alt); border:1px solid var(--l-border); border-radius:20px; padding:2px 10px;
}

/* ============================================================
   HOW IT WORKS  ← LIGHT ALT
============================================================ */
.section-how {
  padding: 96px 0;
  background: var(--l-alt);
  border-top: 1px solid var(--l-border);
}

.how-steps { display:flex; gap:0; align-items:flex-start; flex-wrap:wrap; }
.how-step { flex:1; min-width:210px; position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; }
.step-num { font-size:4rem; font-weight:900; color:var(--l-border2); line-height:1; font-family:'Nunito',sans-serif; margin-bottom:.4rem; letter-spacing:-.04em; }
.step-body {
  background:#fff; border:1px solid var(--l-border); border-radius:16px; padding:2rem 1.4rem; width:100%;
  box-shadow:var(--l-shadow); transition:box-shadow .22s, border-color .22s;
}
.step-body:hover { box-shadow:var(--l-shadow-md); border-color:#bbb; }
.step-icon {
  width:52px; height:52px; background:var(--l-text); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:#fff;
  margin:0 auto 1rem; box-shadow:0 6px 18px rgba(0,0,0,.2);
}
.step-body h4 { color:var(--l-text); font-weight:700; margin-bottom:.4rem; font-size:1rem; }
.step-body p  { color:var(--l-body); font-size:.88rem; }
.step-connector { position:absolute; top:76px; right:-18px; width:36px; height:1px; background:var(--l-border2); z-index:1; }

/* App mockup */
.app-mockup {
  background:#fff; border:1px solid var(--l-border); border-radius:14px; overflow:hidden;
  box-shadow:0 24px 72px rgba(0,0,0,.14); max-width:780px; margin:0 auto;
}
.mockup-titlebar { background:var(--l-alt); padding:10px 16px; display:flex; align-items:center; gap:6px; border-bottom:1px solid var(--l-border); }
.mockup-dot { width:11px; height:11px; border-radius:50%; display:inline-block; }
.mockup-dot.red    { background:#ff5f57; }
.mockup-dot.yellow { background:#febc2e; }
.mockup-dot.green  { background:#28c840; }
.mockup-title { margin-left:8px; font-size:.8rem; color:var(--l-muted); }
.mockup-body { display:flex; min-height:290px; }
.mockup-sidebar { width:144px; background:#fafafa; border-right:1px solid var(--l-border); padding:1rem .5rem; flex-shrink:0; }
.mockup-menu-item { padding:8px 10px; border-radius:7px; font-size:.78rem; color:var(--l-muted); display:flex; align-items:center; gap:8px; margin-bottom:2px; cursor:default; }
.mockup-menu-item.active { background:var(--l-text); color:#fff; }
.mockup-main { flex:1; padding:1.2rem; display:flex; flex-direction:column; gap:.7rem; }
.mockup-header-row { display:flex; justify-content:space-between; align-items:center; }
.mockup-site-badge, .mockup-lang-badge { font-size:.73rem; padding:3px 11px; border-radius:20px; border:1px solid var(--l-border); color:var(--l-body); background:var(--l-alt); }
.mockup-lang-badge { color:var(--l-text); border-color:var(--l-border2); font-weight:600; }
.mockup-post-list { flex:1; display:flex; flex-direction:column; gap:5px; }
.mockup-post { display:flex; align-items:center; gap:10px; background:var(--l-alt); border:1px solid var(--l-border); border-radius:7px; padding:7px 11px; font-size:.78rem; color:var(--l-body); }
.mockup-post.checked { border-color:#ccc; }
.mockup-cb { width:13px; height:13px; border:1.5px solid #ccc; border-radius:3px; flex-shrink:0; }
.mockup-cb.checked { background:var(--l-text); border-color:var(--l-text); }
.mockup-post span:nth-child(2) { flex:1; }
.mockup-status { font-size:.68rem; font-weight:600; padding:2px 8px; border-radius:10px; }
.mockup-status.done     { background:#eee; color:var(--l-text); }
.mockup-status.progress { background:rgba(254,188,46,.15); color:#b38600; }
.mockup-status.queued   { background:transparent; color:var(--l-muted); }
.mockup-footer-row { display:flex; align-items:center; gap:12px; }
.mockup-progress-bar { flex:1; height:4px; background:var(--l-border); border-radius:2px; overflow:hidden; }
.mockup-progress-fill { height:100%; background:var(--l-text); border-radius:2px; animation:progressanim 3.5s ease-in-out infinite alternate; }
@keyframes progressanim { from{width:34%} to{width:56%} }
.mockup-progress-label { font-size:.73rem; color:var(--l-muted); white-space:nowrap; }

/* ============================================================
   ABOUT  ← WHITE
============================================================ */
.section-about {
  padding: 96px 0;
  background: #fff;
  border-top: 1px solid var(--l-border);
}
.author-avatar-wrap { display:inline-block; }
.author-avatar { width:170px; height:170px; border-radius:50%; border:2px solid var(--l-border2); overflow:hidden; margin:0 auto; box-shadow:var(--l-shadow-md); }
.author-svg { width:100%; height:100%; }
.author-tags { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:1.2rem; }
.author-tag { background:var(--l-alt); border:1px solid var(--l-border); color:var(--l-text); border-radius:20px; padding:4px 13px; font-size:.78rem; font-weight:600; }
.about-creds { display:flex; flex-wrap:wrap; gap:10px; }
.cred-link {
  display:inline-flex; align-items:center; gap:7px; color:var(--l-text); font-size:.88rem; font-weight:600;
  text-decoration:none; border:1px solid var(--l-border); border-radius:8px; padding:6px 14px;
  background:var(--l-alt); transition:all .2s;
}
.cred-link:hover { border-color:var(--l-border2); background:var(--l-border); color:var(--l-text); }

/* ============================================================
   TESTIMONIALS  ← LIGHT ALT
============================================================ */
.section-testimonials {
  padding: 96px 0;
  background: var(--l-alt);
  border-top: 1px solid var(--l-border);
}
.testimonial-card {
  background:#fff; border:1px solid var(--l-border); border-radius:18px; padding:2rem; height:100%;
  box-shadow:var(--l-shadow); transition:transform .22s, box-shadow .22s;
}
.testimonial-card:hover { transform:translateY(-4px); box-shadow:var(--l-shadow-md); }
.testimonial-card.featured-review { border-color:#222; border-width:2px; }
.testimonial-stars { color:#d4a017; margin-bottom:1rem; font-size:.9rem; }
.testimonial-card blockquote { font-size:.92rem; color:var(--l-body); line-height:1.75; font-style:italic; border:none; padding:0; margin:0 0 1.2rem; }
.testimonial-author { display:flex; align-items:center; gap:12px; }
.author-initial { width:40px; height:40px; border-radius:50%; background:#eee; border:1px solid var(--l-border2); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; color:var(--l-text); flex-shrink:0; }
.testimonial-author strong { display:block; color:var(--l-text); font-size:.93rem; }
.testimonial-author span   { color:var(--l-muted); font-size:.78rem; }
.testimonial-context { margin-top:.7rem; font-size:.75rem; color:var(--l-body); background:var(--l-alt); border:1px solid var(--l-border); border-radius:8px; padding:3px 10px; display:inline-block; }

/* ============================================================
   CHANGELOG  ← WHITE
============================================================ */
.section-changelog {
  padding: 96px 0;
  background: #fff;
  border-top: 1px solid var(--l-border);
}
.changelog-timeline { display:flex; flex-direction:column; gap:1.25rem; }
.changelog-entry { background:#fff; border:1px solid var(--l-border); border-radius:14px; padding:1.75rem; position:relative; box-shadow:var(--l-shadow); }
.changelog-entry.current { border-color:#111; border-width:1.5px; }
.changelog-tag { position:absolute; top:-11px; left:18px; background:#111; color:#fff; font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:2px 12px; border-radius:20px; }
.changelog-version { font-size:1.1rem; font-weight:800; color:var(--l-text); }
.changelog-date { display:inline-block; margin-left:10px; font-size:.78rem; color:var(--l-muted); }
.changelog-list { list-style:none; padding:0; margin:.75rem 0 0; }
.changelog-list li { display:flex; align-items:flex-start; gap:10px; font-size:.88rem; color:var(--l-body); margin-bottom:.4rem; }
.changelog-list li span { display:inline-block; font-size:.67rem; font-weight:700; padding:2px 8px; border-radius:10px; flex-shrink:0; margin-top:2px; }
.changelog-list li.added   span { background:#111; color:#fff; }
.changelog-list li.fixed   span { background:#eee; color:#333; border:1px solid #ddd; }
.changelog-list li.changed span { background:rgba(254,188,46,.15); color:#8a6200; }

/* ============================================================
   KNOWN BUGS  ← LIGHT ALT
============================================================ */
.section-bugs {
  padding: 96px 0;
  background: var(--l-alt);
  border-top: 1px solid var(--l-border);
}
.bugs-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:1.1rem; }
.bug-item {
  background:#fff; border:1px solid var(--l-border); border-radius:14px; padding:1.5rem;
  border-left:3px solid #bbb; box-shadow:var(--l-shadow); transition:transform .2s;
}
.bug-item:hover { transform:translateY(-3px); box-shadow:var(--l-shadow-md); }
.bug-item.severity-low    { border-left-color:#888; }
.bug-item.severity-medium { border-left-color:#111; }
.bug-header { display:flex; align-items:center; gap:8px; margin-bottom:.7rem; }
.bug-id     { font-size:.68rem; color:var(--l-muted); font-family:monospace; }
.bug-severity { font-size:.66rem; font-weight:700; text-transform:uppercase; padding:2px 8px; border-radius:10px; letter-spacing:.06em; }
.bug-severity.low    { background:var(--l-alt); color:var(--l-muted); border:1px solid var(--l-border); }
.bug-severity.medium { background:#111; color:#fff; }
.bug-status { font-size:.66rem; font-weight:700; padding:2px 8px; border-radius:10px; margin-left:auto; }
.bug-status.open          { background:var(--l-alt); color:var(--l-muted); border:1px solid var(--l-border); }
.bug-status.investigating { background:rgba(254,188,46,.15); color:#8a6200; }
.bug-status.fixed         { background:#111; color:#fff; }
.bug-item h6 { color:var(--l-text); font-weight:700; font-size:.92rem; margin-bottom:.4rem; }
.bug-item p  { font-size:.86rem; color:var(--l-body); margin-bottom:.7rem; }
.bug-footer  { display:flex; justify-content:space-between; align-items:center; font-size:.76rem; color:var(--l-muted); }
.bug-link    { color:var(--l-text); text-decoration:none; font-weight:600; }
.bug-link:hover { text-decoration:underline; }

/* ============================================================
   REQUEST FEATURE  ← WHITE
============================================================ */
.section-request {
  padding: 96px 0;
  background: #fff;
  border-top: 1px solid var(--l-border);
}
.roadmap-preview { display:flex; flex-direction:column; gap:.65rem; }
.roadmap-item { display:flex; align-items:center; gap:12px; background:var(--l-alt); border:1px solid var(--l-border); border-radius:11px; padding:.85rem 1rem; box-shadow:var(--l-shadow); transition:border-color .2s; }
.roadmap-item:hover { border-color:var(--l-border2); }
.ri-num { font-size:1rem; flex-shrink:0; }
.roadmap-item div    { flex:1; }
.roadmap-item strong { display:block; color:var(--l-text); font-size:.88rem; }
.roadmap-item small  { color:var(--l-muted); font-size:.76rem; }
.ri-votes { font-size:.75rem; font-weight:700; color:var(--l-text); background:#eee; border:1px solid var(--l-border); border-radius:20px; padding:2px 10px; white-space:nowrap; }

.feature-request-form-wrap { background:var(--l-alt); border:1px solid var(--l-border); border-radius:18px; padding:2.5rem; box-shadow:var(--l-shadow); }
.feature-request-form-wrap h5 { color:var(--l-text); font-weight:700; }
.form-label { color:var(--l-body); font-size:.88rem; font-weight:500; }

.panda-input { background:#fff; border:1px solid var(--l-border2); border-radius:9px; color:var(--l-text); padding:.65rem 1rem; transition:border-color .2s, box-shadow .2s; }
.panda-input:focus { background:#fff; border-color:#888; box-shadow:0 0 0 3px rgba(0,0,0,.06); color:var(--l-text); outline:none; }
.panda-input::placeholder { color:var(--l-muted); }
.form-check-input:checked  { background-color:var(--l-text); border-color:var(--l-text); }
.form-check-label          { color:var(--l-body); font-size:.88rem; }

.feature-success  { text-align:center; padding:2rem; }
.success-icon     { font-size:3rem; color:var(--l-text); margin-bottom:1rem; }
.feature-success h5 { color:var(--l-text); font-weight:700; }
.feature-success p  { color:var(--l-body); }

/* ============================================================
   DONATE  ← DARK with green accent
============================================================ */
.section-donate {
  padding: 96px 0;
  background: var(--d-bg);
  border-top: 1px solid var(--d-border);
  position: relative; overflow: hidden;
}
.section-donate::before {
  content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:600px; height:400px;
  background:radial-gradient(ellipse,rgba(42,138,88,.09) 0%,transparent 70%);
  pointer-events:none;
}

.donate-wrap  { max-width:880px; margin:0 auto; position:relative; }
.donate-panda { margin-bottom:1.5rem; animation:pandabob 4.5s ease-in-out infinite; }

.donate-options { display:flex; gap:1.5rem; justify-content:center; flex-wrap:wrap; }
.donate-card {
  background:var(--d-card); border:1px solid var(--d-border); border-radius:18px;
  padding:2rem 1.75rem; width:240px; text-align:center; position:relative;
  transition:transform .22s, border-color .22s;
}
.donate-card:hover { transform:translateY(-5px); border-color:var(--d-border2); }
.donate-card.featured-donate { border-color:var(--green); box-shadow:0 0 32px var(--green-glow); }
.donate-badge-top { position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--green); color:#fff; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:2px 12px; border-radius:20px; }
.donate-icon { width:56px; height:56px; border-radius:50%; border:1px solid var(--d-border2); display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin:0 auto 1rem; color:#fff; background:var(--d-bg2); }
.donate-card h5 { color:#fff; font-weight:700; margin-bottom:.5rem; }
.donate-card p  { color:var(--d-body); font-size:.86rem; margin-bottom:1.2rem; }

.btn-bmc { width:100%; border-radius:9px; padding:.55rem 1rem; font-weight:700; font-size:.88rem; border:none; cursor:pointer; transition:all .2s; display:inline-flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; background:var(--green); color:#fff; box-shadow:0 3px 14px var(--green-glow); }
.btn-bmc:hover { background:var(--green-h); color:#fff; transform:translateY(-2px); }
.btn-paypal { width:100%; border-radius:9px; padding:.55rem 1rem; font-weight:700; font-size:.88rem; border:none; cursor:pointer; transition:all .2s; display:inline-flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; background:var(--green); color:#fff; box-shadow:0 3px 14px var(--green-glow); }
.btn-paypal:hover { background:var(--green-h); color:#fff; transform:translateY(-2px); }
.btn-github-d { width:100%; border-radius:9px; padding:.55rem 1rem; font-weight:700; font-size:.88rem; border:1px solid var(--d-border2); cursor:pointer; transition:all .2s; display:inline-flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; background:var(--d-bg2); color:#ccc; }
.btn-github-d:hover { background:var(--d-card); color:#fff; transform:translateY(-2px); }

.donate-note { font-size:.86rem; color:var(--d-muted); }
.donor-tag   { background:var(--d-card); border:1px solid var(--d-border); color:var(--d-body); border-radius:20px; padding:3px 13px; font-size:.8rem; }

/* ============================================================
   FAQ  ← LIGHT ALT
============================================================ */
.section-faq {
  padding: 96px 0;
  background: var(--l-alt);
  border-top: 1px solid var(--l-border);
}
.panda-accordion .accordion-item { background:#fff; border:1px solid var(--l-border)!important; border-radius:12px!important; margin-bottom:.65rem; overflow:hidden; box-shadow:var(--l-shadow); }
.panda-accordion .accordion-button { background:#fff; color:var(--l-text); font-weight:600; font-size:.95rem; padding:1.1rem 1.4rem; border-radius:12px; }
.panda-accordion .accordion-button:not(.collapsed) { background:var(--l-alt); color:var(--l-text); box-shadow:none; }
.panda-accordion .accordion-button::after { opacity:.5; }
.panda-accordion .accordion-body { color:var(--l-body); font-size:.91rem; line-height:1.75; padding:.75rem 1.4rem 1.4rem; background:#fff; }

/* ============================================================
   DOWNLOAD CTA  ← DARK, green download button
============================================================ */
.section-download {
  padding: 110px 0;
  background: var(--d-bg);
  border-top: 1px solid #1a1a1a;
  position: relative; overflow: hidden;
}
.section-download::before {
  content:''; position:absolute; bottom:-80px; left:50%; transform:translateX(-50%);
  width:500px; height:400px;
  background:radial-gradient(ellipse,rgba(42,138,88,.07) 0%,transparent 70%);
  pointer-events:none;
}
.download-bamboo { position:absolute; bottom:0; left:0; right:0; height:280px; pointer-events:none; opacity:.1; }
.download-badge { display:inline-block; background:rgba(255,255,255,.05); border:1px solid #2a2a2a; color:#aaa; border-radius:20px; padding:4px 18px; font-size:.78rem; font-weight:600; }
.download-trust { display:flex; justify-content:center; flex-wrap:wrap; gap:20px; font-size:.83rem; color:var(--d-muted); }
.download-trust span { display:flex; align-items:center; gap:5px; }

/* ============================================================
   FOOTER  ← DARK
============================================================ */
.site-footer { background:var(--d-bg); padding:5rem 0 2rem; border-top:1px solid var(--d-border); }
.footer-desc   { color:var(--d-muted); font-size:.88rem; line-height:1.7; }
.footer-social { display:flex; gap:10px; }
.footer-social a { width:36px; height:36px; border:1px solid var(--d-border2); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--d-muted); font-size:.95rem; text-decoration:none; transition:all .2s; }
.footer-social a:hover { border-color:#555; color:#fff; background:var(--d-card); }
.footer-heading { color:#fff; font-weight:700; font-size:.88rem; margin-bottom:.9rem; }
.footer-links   { list-style:none; padding:0; margin:0; }
.footer-links li { margin-bottom:.45rem; }
.footer-links a { color:var(--d-muted); text-decoration:none; font-size:.86rem; transition:color .18s; }
.footer-links a:hover { color:#fff; }
.footer-bottom { border-top:1px solid var(--d-border); padding-top:2rem; text-align:center; color:var(--d-muted); font-size:.8rem; }
.footer-disclaimer { font-size:.74rem; opacity:.5; margin-top:.3rem; }

/* ============================================================
   CONFETTI & TOAST
============================================================ */
#confettiCanvas { position:fixed; top:0; left:0; width:100vw; height:100vh; pointer-events:none; z-index:9999; }

.toast-wrap { position:fixed; bottom:30px; left:50%; transform:translateX(-50%) translateY(90px); z-index:10000; transition:transform .38s cubic-bezier(.175,.885,.32,1.275); }
.toast-wrap.show { transform:translateX(-50%) translateY(0); }
.panda-toast { background:rgba(10,10,10,.96); border:1px solid #333; color:#ddd; border-radius:40px; padding:11px 26px; font-weight:600; font-size:.88rem; display:flex; align-items:center; box-shadow:0 10px 40px rgba(0,0,0,.5); backdrop-filter:blur(14px); }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:991px) {
  .bamboo-left, .bamboo-right { width:80px; opacity:.1; }
  .how-steps { flex-direction:column; }
  .step-connector { display:none; }
  .donate-options { flex-direction:column; align-items:center; }
}
@media (max-width:767px) {
  .bamboo-left, .bamboo-right { display:none; }
  .bugs-grid { grid-template-columns:1fr; }
  .hero-social-proof { justify-content:center; }
  .proof-item { padding:0 10px; }
  .proof-item:first-child { padding-left:10px; }
  .proof-item strong { font-size:1.1rem; }
  .section-title { font-size:clamp(1.5rem,6vw,2rem); }
  .btn-download { min-width:220px; padding:14px 28px; font-size:.95rem; }
  .btn-download.large { min-width:240px; padding:16px 28px; }
  .feature-request-form-wrap { padding:1.5rem; }
  .how-step { min-width:unset; width:100%; }
  .about-creds { flex-direction:column; }
  .mockup-sidebar { display:none; }
  .roadmap-preview { display:none; }
  /* Demo widget on mobile */
  .demo-translate-bar { flex-direction:column; align-items:flex-start; gap:8px; }
  .demo-lang-btns { gap:5px; }
  .demo-lang-btn { padding:4px 9px; font-size:.72rem; }
  .demo-card-body { padding:1.25rem; }
  .demo-post-title { font-size:1rem; }
}