/* ===================================================
   VideoDoc — Global Styles
   VideoDoc landing
   Lucide icons
   =================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap');

/* ─── Design Tokens ─── */
:root {
  --brand-green:       #186D56;
  --brand-green-light: #1A9E78;
  --brand-green-pale:  #e8f5f0;
  --brand-dark:        #0a1a14;
  --brand-dark-2:      #0f2219;
  --brand-dark-3:      #152c22;

  --text-white:        #ffffff;
  --text-light:        #e2ede8;
  --text-muted:        #8aab9c;
  --text-dark:         #1a2e25;
  --text-body:         #2d4a3a;

  --bg-white:          #ffffff;
  --bg-light:          #f5fbf8;
  --bg-section:        #f0f9f4;

  --border-light:      #d4ece2;
  --border-green:      #186D56;

  --shadow-sm:         0 2px 8px rgba(24,109,86,.08);
  --shadow-md:         0 8px 32px rgba(24,109,86,.12);
  --shadow-lg:         0 24px 64px rgba(24,109,86,.18);

  --radius-sm:         8px;
  --radius-md:         14px;
  --radius-lg:         24px;
  --radius-xl:         40px;

  --font-display:      'Sora', sans-serif;
  --font-body:         'Inter', sans-serif;

  --transition:        all .25s cubic-bezier(.4,0,.2,1);

  --max-width:         1200px;
  --section-pad:       100px 24px;
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  color: var(--text-body);
  background: var(--bg-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ─── Typography ─── */
h1, h2, h3, h4, h5 { font-family: var(--font-display); line-height: 1.2; }
h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 700; }
h3 { font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 600; }
p  { font-size: 1.05rem; line-height: 1.75; }

/* ─── Layout ─── */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.section { padding: var(--section-pad); }

/* ─── Buttons ─── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; border-radius: var(--radius-md);
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  letter-spacing: .01em; transition: var(--transition);
  white-space: nowrap;
}
.btn-primary {
  background: var(--brand-green); color: #fff;
  box-shadow: 0 4px 20px rgba(24,109,86,.3);
}
.btn-primary:hover {
  background: var(--brand-green-light);
  box-shadow: 0 8px 28px rgba(24,109,86,.4);
  transform: translateY(-2px);
}
.btn-outline {
  border: 2px solid var(--brand-green); color: var(--brand-green);
  background: transparent;
}
.btn-outline:hover {
  background: var(--brand-green); color: #fff;
  transform: translateY(-2px);
}
.btn-ghost {
  color: #fff; border: 1.5px solid rgba(255,255,255,.3);
}
.btn-ghost:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.6);
}
.btn-lg { padding: 18px 36px; font-size: 1.05rem; border-radius: var(--radius-lg); }
.btn-sm { padding: 10px 20px; font-size: .875rem; }

/* ─── Badge ─── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 100px;
  font-size: .8rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase;
}
.badge-green { background: var(--brand-green-pale); color: var(--brand-green); }
.badge-white { background: rgba(255,255,255,.15); color: #fff; }

/* ─── Section Labels ─── */
.section-label {
  font-family: var(--font-display); font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-green-light); margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}
.section-label::before {
  content: ''; display: block; width: 24px; height: 2px;
  background: var(--brand-green-light);
}

/* ─── Cards ─── */
.card {
  background: #fff; border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); padding: 32px;
  transition: var(--transition); box-shadow: var(--shadow-sm);
}
.card:hover {
  box-shadow: var(--shadow-md); border-color: var(--brand-green-light);
  transform: translateY(-4px);
}

/* ─── Animations ─── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.04); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

.animate-fadeUp { animation: fadeUp .7s ease forwards; }
.animate-fadeIn { animation: fadeIn .5s ease forwards; }

[data-aos] { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
[data-aos].aos-animate { opacity: 1; transform: translateY(0); }

/* ─── Utility ─── */
.text-center { text-align: center; }
.text-green  { color: var(--brand-green-light); }
.text-muted  { color: var(--text-muted); }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-40 { margin-bottom: 40px; }
.mb-64 { margin-bottom: 64px; }
.gap-8  { gap: 8px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.grid { display: grid; }

/* ─── Responsive ─── */
@media (max-width: 768px) {
  :root { --section-pad: 64px 20px; }
  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.8rem; }
}

/* ─── Lucide (landing) ─── */
.landing-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
}
.landing-icon svg {
  width: 1em;
  height: 1em;
  stroke: currentColor;
}
.landing-icon--badge { font-size: 14px; margin-right: 6px; color: var(--brand-green-light); }
.landing-icon--btn { font-size: 18px; }
.btn .landing-icon--btn { margin-left: 4px; }
.btn-ghost .landing-icon--btn:first-child { margin-left: 0; margin-right: 6px; }
.landing-icon--pill { font-size: 14px; color: var(--brand-green-light); }
.landing-icon--step { font-size: 28px; color: var(--brand-green); }
.landing-icon--feature { font-size: 26px; color: var(--brand-green); }
.feature-card--highlight .landing-icon--feature { color: var(--brand-green-light); }
.landing-icon--case { font-size: 48px; color: var(--brand-green); opacity: .85; }
.landing-icon--demo-doc { font-size: 64px; color: var(--brand-green); opacity: .35; }
.landing-stars {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #f59e0b;
  margin-bottom: 16px;
}
.landing-stars svg {
  width: 16px;
  height: 16px;
  fill: #f59e0b;
  stroke: #f59e0b;
}
.pricing-feature__check svg {
  width: 11px;
  height: 11px;
  stroke-width: 3px;
}
.faq-item__chevron svg {
  width: 20px;
  height: 20px;
}