/* =====================================================================
   VideoEditorAI — minimalist design layer (loaded after styles.css).
   Neutral surfaces, near-black ink, ONE restrained accent, flat (no
   gradients), generous whitespace. Scoped to ve-* plus a little chrome.
   ===================================================================== */
:root {
  --ve-ink: #16181d;
  --ve-muted: #6b7280;
  --ve-line: #ececf1;
  --ve-bg: #ffffff;
  --ve-soft: #f7f7f9;
  --ve-accent: #5b54e8;       /* single calm indigo, used sparingly */
  --ve-accent-ink: #4a43d6;
  --ve-dark: #14161b;          /* flat dark for footer/mock */
  --ve-radius: 14px;
  --ve-radius-lg: 20px;
  --ve-shadow: 0 8px 30px rgba(20, 22, 27, .08);
}

body.page-container { background: var(--ve-bg); color: var(--ve-ink); }

/* ---------- buttons ---------- */
.ve-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: .98rem; line-height: 1; text-decoration: none;
  padding: .85rem 1.4rem; border-radius: 10px; border: 1px solid transparent; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.ve-btn:hover { text-decoration: none; }
.ve-btn-primary { background: var(--ve-ink); color: #fff; }
.ve-btn-primary:hover { background: #000; color: #fff; }
.ve-btn-ghost { background: transparent; color: var(--ve-ink); border-color: var(--ve-line); }
.ve-btn-ghost:hover { background: var(--ve-soft); color: var(--ve-ink); }
.ve-btn-light { background: var(--ve-ink); color: #fff; }
.ve-btn-light:hover { background: #000; color: #fff; }

/* ---------- hero (light, flat) ---------- */
.ve-hero { position: relative; background: var(--ve-bg); padding: 4rem 0 3.5rem; border-bottom: 1px solid var(--ve-line); }
.ve-hero-glow { display: none; }
.ve-hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: center; }
.ve-eyebrow {
  display: inline-block; font-size: .76rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ve-muted);
  margin-bottom: 1rem;
}
.ve-hero-title { font-size: clamp(2.3rem, 4.6vw, 3.4rem); line-height: 1.07; font-weight: 750; letter-spacing: -.025em; margin: 0 0 1.1rem; color: var(--ve-ink); }
.ve-hero-title span { color: var(--ve-accent); }
.ve-hero-sub { font-size: 1.12rem; line-height: 1.6; color: var(--ve-muted); max-width: 33rem; margin: 0 0 1.7rem; }
.ve-hero-cta { display: flex; gap: .7rem; flex-wrap: wrap; }
.ve-hero-meta { margin-top: 1rem; font-size: .82rem; color: #9aa1ad; }

/* hero product mock — light, clean */
.ve-hero-visual { display: flex; justify-content: center; }
.ve-window { width: 100%; max-width: 440px; background: #fff; border-radius: var(--ve-radius-lg); border: 1px solid var(--ve-line); box-shadow: var(--ve-shadow); overflow: hidden; }
.ve-window-bar { display: flex; gap: .4rem; padding: .75rem .9rem; border-bottom: 1px solid var(--ve-line); }
.ve-window-bar span { width: 10px; height: 10px; border-radius: 50%; background: #e3e3ea; }
.ve-window-stage { position: relative; aspect-ratio: 16/10; background: #0f1115; }
.ve-window-select { position: absolute; left: 32%; top: 28%; width: 30%; height: 40%; border: 2px dashed rgba(255,255,255,.85); border-radius: 12px; }
.ve-window-pill { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; background: var(--ve-accent); color: #fff; font-size: .8rem; font-weight: 600; padding: .4rem .75rem; border-radius: 999px; }
.ve-window-timeline { position: relative; padding: .8rem .9rem 1rem; background: #fff; }
.ve-window-track { height: 22px; border-radius: 6px; background: repeating-linear-gradient(90deg,#eeeef3 0 18px,#f7f7f9 18px 22px); }
.ve-window-playhead { position: absolute; top: .55rem; bottom: .55rem; left: 38%; width: 2px; background: var(--ve-accent); }

/* ---------- sections ---------- */
.ve-section { padding: 4rem 0 1rem; }
.ve-section-head { text-align: center; max-width: 40rem; margin: 0 auto 2.5rem; }
.ve-section-title { font-size: clamp(1.6rem,3vw,2.1rem); font-weight: 750; letter-spacing: -.02em; margin: 0 0 .5rem; color: var(--ve-ink); }
.ve-section-sub { font-size: 1.05rem; color: var(--ve-muted); margin: 0; }

.ve-cat { margin-bottom: 2.4rem; }
.ve-cat-head { display: flex; align-items: center; gap: .55rem; margin: 0 0 1rem; }
.ve-cat-title { font-size: .82rem; font-weight: 650; margin: 0; text-transform: uppercase; letter-spacing: .08em; color: var(--ve-muted); }
.ve-cat-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ve-accent); }
.ve-dot-cleanup, .ve-dot-enhance, .ve-dot-edit, .ve-dot-audio { background: var(--ve-accent); }

.ve-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.ve-card {
  display: flex; flex-direction: column; gap: .5rem;
  background: var(--ve-bg); border: 1px solid var(--ve-line); border-radius: var(--ve-radius);
  padding: 1.3rem; text-decoration: none; color: var(--ve-ink);
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.ve-card::before { display: none; }   /* no colored edge */
.ve-card:hover { transform: translateY(-3px); box-shadow: var(--ve-shadow); border-color: #dcdce4; text-decoration: none; color: var(--ve-ink); }
.ve-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9px; background: var(--ve-soft); color: var(--ve-accent); }
.ve-card-icon svg { width: 18px; height: 18px; }
.ve-card-name { font-weight: 650; font-size: 1rem; }
.ve-card-desc { font-size: .85rem; color: var(--ve-muted); line-height: 1.45; flex: 1; }
.ve-card-go { font-size: .82rem; font-weight: 600; color: var(--ve-accent); opacity: 0; transform: translateX(-4px); transition: .15s; }
.ve-card:hover .ve-card-go { opacity: 1; transform: translateX(0); }

/* ---------- CTA band — soft, not loud ---------- */
.ve-band { margin: 3.5rem 0 0; }
.ve-band-inner { background: var(--ve-soft); border: 1px solid var(--ve-line); color: var(--ve-ink); border-radius: var(--ve-radius-lg); text-align: center; padding: 3rem 1.5rem; }
.ve-band-title { font-size: clamp(1.5rem,2.6vw,2rem); font-weight: 750; letter-spacing: -.02em; margin: 0 0 .4rem; }
.ve-band-sub { color: var(--ve-muted); margin: 0 0 1.4rem; }

/* ---------- nav polish ---------- */
#header .navbar-brand { font-weight: 750; letter-spacing: -.02em; color: var(--ve-ink); }
#header .nav-link { font-weight: 500; color: #3a3f4a !important; }
#header .nav-link:hover { color: var(--ve-accent) !important; }
#header .btn-pro, #header .btn-primary { background: var(--ve-ink) !important; border: 0 !important; border-radius: 10px !important; color: #fff !important; font-weight: 600; box-shadow: none; }
#header .btn-pro:hover, #header .btn-primary:hover { background: #000 !important; }
#header .btn-light { border-radius: 10px !important; font-weight: 550; }
#navbarSearch input.search-input, .home-search input.search-input { border-radius: 10px !important; }

/* ---------- footer — flat dark, minimal ---------- */
#footer { background: var(--ve-dark) !important; }
#footer h6 { color: #e7e7ee; }
#footer a { color: #9aa1ad !important; }
#footer a:hover { color: #fff !important; }
.ve-foot-bar { display: flex; align-items: center; justify-content: center; gap: .7rem; flex-wrap: wrap; margin: 1.4rem 0 .9rem; }
.ve-foot-stat { font-size: .78rem; color: #8b919c; }
.ve-foot-sep { color: #3a3f4a; }
.ve-foot-links { margin: 0 0 .5rem; }
.ve-foot-links a { margin: 0 .6rem; color: #8b919c !important; }
.ve-foot-links a:hover { color: #fff !important; }
.ve-foot-copy { font-size: .76rem; color: #6b7280; padding-bottom: 1.4rem; }
.ve-foot-copy a { color: #8b919c !important; }
#footer .page-ratings { background: transparent; padding: 0; margin: 0; }
#footer .page-ratings .stars { font-size: 12px; letter-spacing: 0; }
#footer .rating-value { color: #cfd2da; font-size: 11px; }
#footer .rating-count { color: #6b7280; font-size: 10px; }
#footer .rating-message { font-size: 9px; }
#footer .page-ratings a { color: inherit !important; }

/* ---------- editor island: reserve space pre-mount to avoid CLS ---------- */
#editor-root { min-height: 72vh; display: block; }

/* ---------- how-it-works step number ---------- */
.ve-step-num { font-size: 2rem; font-weight: 750; color: var(--ve-accent); line-height: 1; margin-bottom: .4rem; }
.ve-section.pt-0 { padding-top: 0; }

/* ---------- breadcrumbs (slim bar right under nav) ---------- */
.ve-crumbs { padding: .9rem 0 .15rem; font-size: .85rem; }
.ve-crumbs a { color: var(--ve-muted); }
.ve-crumbs a:hover { color: var(--ve-accent); }
.ve-crumb-sep { color: #c7cbd3; margin: 0 .4rem; }
.ve-crumb-cur { color: var(--ve-ink); }
.ve-page { padding: 1.5rem 0 2.5rem; }

/* ---------- tool landing hero ---------- */
.tool-hero-media { position: relative; overflow: hidden; background: var(--ve-soft); border: 1px solid var(--ve-line); color: var(--ve-ink); border-radius: var(--ve-radius-lg); min-height: 240px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .9rem; }
.tool-hero-media::after { display: none; }
.tool-hero-icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 16px; background: #fff; border: 1px solid var(--ve-line); color: var(--ve-accent); }
.tool-hero-icon svg { width: 28px; height: 28px; }
.tool-hero-label { font-weight: 650; font-size: 1.05rem; color: var(--ve-ink); }

/* ---------- responsive ---------- */
@media (max-width: 992px) {
  .ve-hero-inner { grid-template-columns: 1fr; }
  .ve-hero-visual { display: none; }
  .ve-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ve-grid { grid-template-columns: 1fr; }
  .ve-hero { padding: 2.5rem 0 2.5rem; }
}