/* ==========================================================================
   Willow Design — Components
   ========================================================================== */

/* ---- Hero (Home) ---- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--gradient-hero);
  color: var(--color-white);
  overflow: hidden;
  padding-top: var(--header-h);
}
.hero-tree{
    display: flex;
    justify-content: end;
    align-items: center;
}
.hero::before { content: ''; position: absolute; inset: 0; background: var(--gradient-mesh); }
.hero-grain {
  position: absolute; inset: 0; opacity: 0.05; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.6) 1px, transparent 1px);
  background-size: 3px 3px;
}
.hero .container {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: var(--space-xl);
  padding-block: var(--space-2xl);
 
}
.hero-eyebrow {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.22);
  color: var(--color-accent-light);
}
.hero h1 { color: var(--color-white); font-size: var(--fs-hero); }
.hero h1 .line { display: block; overflow: hidden; }
.hero-sub { color: rgba(255,255,255,0.72); font-size: var(--fs-lg); max-width: 520px; margin-top: var(--space-md); }
.hero-actions { display: flex; gap: var(--space-sm); margin-top: var(--space-lg); flex-wrap: wrap; }
.hero-stats {
  display: flex; gap: var(--space-lg);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255,255,255,0.16);
}
.hero-stat .num { font-size: 1.8rem; font-weight: 800; color: var(--color-white); }
.hero-stat .num span { color: var(--color-accent-light); }
.hero-stat .label { font-size: var(--fs-xs); color: rgba(255,255,255,0.6); margin-top: 0.2rem; }

.hero-art { position: relative; height: 560px; }
.hero-art svg {
    width:100%;
    height:100%;
    display:block;
    overflow:hidden;
 }
.hero-art .willow-path { fill: none; stroke: var(--color-accent-light); stroke-width: 1.6; stroke-linecap: round; opacity: 0.85; }
.hero-art .willow-path.alt { stroke: var(--color-secondary); opacity: 0.6; }
.hero-leaf { fill: var(--color-accent); }
.hero-leaf.light { fill: var(--color-accent-light); }

.glass-chip {
  position: absolute;
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.8rem 1.2rem;
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
  font-size: var(--fs-sm); font-weight: 700; color: var(--color-primary);
}
.glass-chip i { color: var(--color-accent); font-size: 1.1rem; }
.glass-chip.chip-1 { top: 8%; left: 4%; }
.glass-chip.chip-2 { bottom: 14%; left: 12%; }
.glass-chip.chip-3 { top: 42%; right: 2%; }

.scroll-cue {
  position: absolute; bottom: var(--space-3xs); right: 50%; transform: translateX(50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  color: rgba(255,255,255,0.55); font-size: var(--fs-xs); z-index: 2;
}
.scroll-cue .mouse { width: 22px; height: 34px; border: 1.5px solid rgba(255,255,255,0.4); border-radius: 12px; position: relative; }
.scroll-cue .mouse::before {
  content: ''; position: absolute; top: 6px; right: 50%; transform: translateX(50%);
  width: 3px; height: 6px; border-radius: 2px; background: var(--color-accent-light);
  animation: scrollDot 1.6s infinite;
}
@keyframes scrollDot { 0% { opacity: 1; top: 6px; } 70% { opacity: 0; top: 16px; } 100% { opacity: 0; top: 6px; } }

/* ---- Willow divider ---- */
.willow-divider { width: 100%; height: 60px; overflow: hidden; line-height: 0; }
.willow-divider svg { width: 100%; height: 100%; }

/* ---- Intro / About section ---- */
.intro-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-xl); align-items: center; }
.intro-visual { position: relative; }
.intro-visual .frame {
  border-radius: var(--radius-organic);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/5;
}
.intro-visual .frame img { width: 100%; height: 100%; object-fit: cover; }
.intro-badge {
  position: absolute; bottom: -1.5rem; left: -1.5rem;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-glass);
  text-align: center;
  min-width: 140px;
}
.intro-badge .num { font-size: 2.2rem; font-weight: 800; color: var(--color-primary); }
.intro-badge .label { font-size: var(--fs-xs); color: var(--color-ink-soft); }
.intro-list { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-lg); }
.intro-list li { display: flex; align-items: flex-start; gap: 0.8rem; font-size: var(--fs-md); color: var(--color-ink); }
.intro-list i { color: var(--color-accent); background: rgba(87,204,153,0.12); width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 0.15rem; }

/* ---- Cards: Services ---- */
.services-grid { grid-template-columns: repeat(3, 1fr); }
.service-card {
  position: relative;
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med);
  overflow: hidden;
}
.service-card::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--gradient-mesh);
  opacity: 0;
  transition: opacity var(--dur-med);
  pointer-events: none;
}
.service-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); border-color: transparent; }
.service-card:hover::after { opacity: 1; }
.service-icon {
  width: 58px; height: 58px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--gradient-leaf);
  color: var(--color-white); font-size: 1.4rem;
  margin-bottom: var(--space-md);
  position: relative; z-index: 1;
}
.service-card h3 { position: relative; z-index: 1; margin-bottom: 0.6rem; }
.service-card p { position: relative; z-index: 1; font-size: var(--fs-sm); }
.service-card .card-link { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.4rem; margin-top: var(--space-md); font-size: var(--fs-sm); font-weight: 700; color: var(--color-secondary); }
.service-card .card-link i { transition: transform var(--dur-fast); }
.service-card:hover .card-link i { transform: translateX(-4px); }

/* ---- Why us ---- */
.why-grid { grid-template-columns: repeat(4, 1fr); }
.why-card {
  text-align: center;
  padding: var(--space-lg) var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
}
.why-card .icon-circle {
  width: 64px; height: 64px; margin-inline: auto var(--space-sm);
  border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff; font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
}
.why-card h3 { font-size: var(--fs-md); margin-bottom: 0.4rem; }
.why-card p { font-size: var(--fs-sm); }

/* ---- Process steps ---- */
.process-track { position: relative; }
.process-track::before {
  content: '';
  position: absolute; top: 34px; right: 8%; left: 8%; height: 2px;
  background: repeating-linear-gradient(to left, var(--color-secondary) 0 8px, transparent 8px 16px);
  opacity: 0.4;
}
.process-grid { grid-template-columns: repeat(4, 1fr); position: relative; }
.process-step { text-align: center; position: relative; }
.process-num {
  width: 70px; height: 70px; margin-inline: auto var(--space-md);
  border-radius: 50%;
  background: var(--color-white);
  border: 2px solid var(--color-accent);
  color: var(--color-primary);
  font-size: 1.4rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  box-shadow: var(--shadow-sm);
}
.process-step h3 { font-size: var(--fs-md); margin-bottom: 0.4rem; }
.process-step p { font-size: var(--fs-sm); }

/* ---- Stats ---- */
.stats-panel {
  background: var(--gradient-hero);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl) var(--space-lg);
  position: relative;
  overflow: hidden;
}
.stats-panel::before { content:''; position:absolute; inset:0; background: var(--gradient-mesh); }
.stats-grid { grid-template-columns: repeat(4, 1fr); position: relative; z-index: 1; text-align: center; }
.stat-item .num { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: var(--color-white); }
.stat-item .num span { color: var(--color-accent-light); }
.stat-item .label { color: rgba(255,255,255,0.65); font-size: var(--fs-sm); margin-top: 0.4rem; }

/* ---- Portfolio ---- */
.portfolio-filters { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: var(--space-xl); }
.filter-btn {
  padding: 0.6rem 1.3rem;
  border-radius: var(--radius-full);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  font-size: var(--fs-sm); font-weight: 600; color: var(--color-ink-soft);
  transition: all var(--dur-fast);
}
.filter-btn:hover { border-color: var(--color-accent); color: var(--color-primary); }
.filter-btn.active { background: var(--gradient-accent); color: #fff; border-color: transparent; box-shadow: var(--shadow-sm); }

.portfolio-grid { grid-template-columns: repeat(3, 1fr); }
.portfolio-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3.2;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.portfolio-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-soft); }
.portfolio-card:hover img { transform: scale(1.08); }
.portfolio-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(15,46,64,0.92) 0%, rgba(15,46,64,0.2) 55%, transparent 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--space-lg);
  opacity: 0; transition: opacity var(--dur-med);
}
.portfolio-card:hover .portfolio-overlay { opacity: 1; }
.portfolio-cat { color: var(--color-accent-light); font-size: var(--fs-xs); font-weight: 700; margin-bottom: 0.3rem; }
.portfolio-title { color: #fff; font-size: 1.1rem; font-weight: 700; }
.portfolio-zoom {
  position: absolute; top: var(--space-md); left: var(--space-md);
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--glass-bg); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary);
  opacity: 0; transform: translateY(-8px);
  transition: all var(--dur-med);
}
.portfolio-card:hover .portfolio-zoom { opacity: 1; transform: translateY(0); }

.portfolio-modal {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-lg);
  background: rgba(15,46,64,0.75);
  backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-med);
}
.portfolio-modal.open { opacity: 1; pointer-events: auto; }
.modal-box {
  background: #fff; border-radius: var(--radius-lg); overflow: hidden;
  max-width: 780px; width: 100%; max-height: 88vh; overflow-y: auto;
  box-shadow: var(--shadow-lg);
  transform: translateY(30px) scale(0.97); transition: transform var(--dur-med) var(--ease-soft);
}
.portfolio-modal.open .modal-box { transform: translateY(0) scale(1); }
.modal-box img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.modal-body { padding: var(--space-lg); }
.modal-close {
  position: absolute; top: var(--space-lg); left: var(--space-lg);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--glass-bg); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); color: #fff; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
}

/* ---- Testimonials ---- */
/* ===========================
   Testimonials Slider
=========================== */

.testimonial-viewport {
  overflow: hidden;
  cursor: grab;
  user-select: none;
  margin-inline: calc(var(--space-md) * -1);
  padding-inline: var(--space-md);
}

.testimonial-viewport.dragging {
  cursor: grabbing;
}


.testimonial-track {
  display: flex;
  gap: var(--space-md);
  width: max-content;
  transition: transform .5s ease;
}


.testimonial-card {
  flex: 0 0 360px;
  width: 360px;
  min-height: 280px;

  padding: var(--space-lg);

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);

  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);

  box-sizing: border-box;
}


.testimonial-stars {
  color: var(--color-accent);
  font-size: 0.85rem;
  margin-bottom: var(--space-sm);
  letter-spacing: 0.2em;
}


.testimonial-text {
  font-size: var(--fs-md);
  color: var(--color-ink);

  line-height: 1.9;

  margin-bottom: var(--space-md);

  overflow: visible;
}


.testimonial-person {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}


.testimonial-person img {
  width:46px;
  height:46px;
  border-radius:50%;
  object-fit:cover;
}


.testimonial-person .name {
  font-weight:700;
  font-size:var(--fs-sm);
}


.testimonial-person .role {
  font-size:var(--fs-xs);
  color:var(--color-ink-soft);
}


.testimonial-controls {
  display:flex;
  justify-content:center;
  gap:.8rem;
  margin-top:var(--space-xl);
}



/* ===========================
   Tablet
=========================== */

@media(max-width:900px){

  .testimonial-card{
    flex-basis:320px;
    width:320px;
  }

}



/* ===========================
   Mobile
=========================== */

@media(max-width:640px){

  .testimonial-viewport{
    margin-inline:0;
    padding-inline:0;
  }
 


  .testimonial-track{
    gap:16px;
  }


  .testimonial-card{

    flex:0 0 calc(100vw - 32px);
    width:calc(100vw - 32px);

    min-height:unset;

    padding:1.2rem;

  }


  .testimonial-text{

    font-size:0.95rem;
    line-height:1.8;

  }


  .testimonial-person{
    margin-top:1rem;
  }

}
.slider-btn {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--color-white); border: 1px solid var(--color-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary); transition: all var(--dur-fast);
}
.slider-btn:hover { background: var(--gradient-accent); color: #fff; border-color: transparent; }

/* ---- FAQ ---- */
.faq-list { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-sm); }
.faq-item {
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  overflow: hidden;
}
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  font-weight: 700; font-size: var(--fs-md); text-align: right;
}
.faq-question .icon {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: rgba(87,204,153,0.14); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-med) var(--ease-out), background var(--dur-med);
}
.faq-item.open .faq-question .icon { transform: rotate(135deg); background: var(--gradient-leaf); color: #fff; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--dur-med) var(--ease-soft); }
.faq-answer-inner { padding: 0 var(--space-lg) var(--space-lg); font-size: var(--fs-sm); color: var(--color-ink-soft); }

/* ---- Blog cards ---- */
.blog-grid { grid-template-columns: repeat(3, 1fr); }
.blog-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med);
  display: flex; flex-direction: column;
}
.blog-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.blog-thumb { aspect-ratio: 16/10; overflow: hidden; position: relative; }
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-soft); }
.blog-card:hover .blog-thumb img { transform: scale(1.06); }
.blog-tag {
  position: absolute; top: var(--space-sm); right: var(--space-sm);
  background: var(--glass-bg); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  padding: 0.35rem 0.9rem; border-radius: var(--radius-full);
  font-size: var(--fs-xs); font-weight: 700; color: var(--color-primary);
}
.blog-body { padding: var(--space-lg); flex: 1; display: flex; flex-direction: column; }
.blog-meta { display: flex; align-items: center; gap: 1rem; font-size: var(--fs-xs); color: var(--color-ink-soft); margin-bottom: 0.6rem; }
.blog-meta span { display: flex; align-items: center; gap: 0.35rem; }
.blog-body h3 { font-size: 1.15rem; margin-bottom: 0.6rem; }
.blog-body p { font-size: var(--fs-sm); flex: 1; }
.blog-readmore { margin-top: var(--space-md); display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-sm); font-weight: 700; color: var(--color-secondary); }

/* ---- CTA ---- */
.cta-panel {
  position: relative;
  border-radius: var(--radius-xl);
  background: var(--gradient-hero);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  overflow: hidden;
}
.cta-panel::before { content:''; position:absolute; inset:0; background: var(--gradient-mesh); }
.cta-panel .content { position: relative; z-index: 1; max-width: 640px; margin-inline: auto; }
.cta-panel h2 { color: #fff; }
.cta-panel p { color: rgba(255,255,255,0.7); margin-top: var(--space-sm); font-size: var(--fs-lg); }
.cta-actions { display: flex; justify-content: center; gap: var(--space-sm); margin-top: var(--space-lg); flex-wrap: wrap; }

/* ---- Forms ---- */
.form-glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-glass);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.form-group { margin-bottom: var(--space-md); position: relative; }
.form-group label { display: block; font-size: var(--fs-sm); font-weight: 700; margin-bottom: 0.5rem; color: var(--color-primary); }
.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-line);
  background: rgba(255,255,255,0.7);
  font-size: var(--fs-md);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(87,204,153,0.15);
}
.form-group textarea { resize: vertical; min-height: 130px; }
.form-error { display: none; color: #C0392B; font-size: var(--fs-xs); margin-top: 0.4rem; }
.form-group.invalid input, .form-group.invalid textarea, .form-group.invalid select { border-color: #C0392B; }
.form-group.invalid .form-error { display: block; }
.form-success {
  display: none;
  align-items: center; gap: 0.6rem;
  background: rgba(87,204,153,0.14);
  border: 1px solid rgba(87,204,153,0.35);
  color: var(--color-primary);
  padding: 1rem 1.2rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm); font-weight: 600;
  margin-top: var(--space-md);
}
.form-success.show { display: flex; }

.contact-info-grid { grid-template-columns: repeat(3, 1fr); margin-top: var(--space-xl); }
.contact-info-card {
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  text-align: center;
}
.contact-info-card i { width: 54px; height: 54px; border-radius: 50%; background: var(--gradient-leaf); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-inline: auto var(--space-sm); }
.contact-info-card h3 { font-size: var(--fs-md); margin-bottom: 0.4rem; }
.contact-info-card p { font-size: var(--fs-sm); }

.contact-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-xl); align-items: flex-start; }
@media (max-width: 960px) { .contact-split { grid-template-columns: 1fr; } }

.map-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 400px;
  border: 1px solid var(--color-line);
  position: relative;
  background: var(--gradient-section);
}
.map-frame .map-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.6rem; color: var(--color-ink-soft);
}
.map-frame .map-placeholder i { font-size: 2rem; color: var(--color-secondary); }

/* ---- Team (about) ---- */
.team-grid { grid-template-columns: repeat(4, 1fr); }
.team-card { text-align: center; }
.team-photo { border-radius: var(--radius-organic); overflow: hidden; aspect-ratio: 1/1.1; margin-bottom: var(--space-sm); box-shadow: var(--shadow-sm); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card h3 { font-size: var(--fs-md); }
.team-card .role { font-size: var(--fs-xs); color: var(--color-secondary); font-weight: 700; margin-top: 0.2rem; }

/* ---- Values (about) ---- */
.values-grid { grid-template-columns: repeat(2, 1fr); }
.value-card { display: flex; gap: var(--space-md); padding: var(--space-lg); border-radius: var(--radius-lg); background: var(--color-white); border: 1px solid var(--color-line); }
.value-card i { width: 52px; height: 52px; flex-shrink: 0; border-radius: var(--radius-sm); background: rgba(56,163,165,0.12); color: var(--color-secondary); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }

/* ---- Timeline (about) ---- */
.timeline { position: relative; max-width: 760px; margin-inline: auto; }
.timeline::before { content: ''; position: absolute; top: 0; bottom: 0; right: 20px; width: 2px; background: var(--color-line); }
.timeline-item { position: relative; padding-right: 56px; padding-bottom: var(--space-xl); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot { position: absolute; right: 12px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--gradient-leaf); box-shadow: 0 0 0 5px rgba(87,204,153,0.16); }
.timeline-year { font-weight: 800; color: var(--color-secondary); font-size: var(--fs-sm); margin-bottom: 0.3rem; }
.timeline-item h3 { font-size: var(--fs-md); margin-bottom: 0.3rem; }
.timeline-item p { font-size: var(--fs-sm); }

/* ---- Pricing (services) ---- */
.pricing-grid {
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}

.pricing-card {
  position: relative;
  padding: 4.5rem var(--space-lg) var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med);
}

.pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.pricing-card.featured {
  position: relative;
  overflow: hidden;
  background: var(--gradient-hero);
  color: #fff;
}

.pricing-card.featured::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-mesh);
  z-index: 0;
}

/* فقط محتوای کارت روی بک‌گراند قرار بگیرد */
.pricing-card.featured h3,
.pricing-card.featured p,
.pricing-card.featured .price,
.pricing-card.featured ul,
.pricing-card.featured a {
  position: relative;
  z-index: 1;
}

/* Badge */
.pricing-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 10;

  background: var(--gradient-leaf);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-full);
  line-height: 1;
  white-space: nowrap;
}

.pricing-card.featured h3,
.pricing-card.featured .price {
  color: #fff;
}

.pricing-card.featured p,
.pricing-card.featured li {
  color: rgba(255,255,255,.72);
}

.price {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--color-primary);
  margin: var(--space-sm) 0;
}

.price span {
  font-size: var(--fs-sm);
  font-weight: 500;
}

.pricing-card ul {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  margin: var(--space-md) 0;
  flex: 1;
}

.pricing-card li {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--fs-sm);
}

.pricing-card li i {
  color: var(--color-accent);
}

.pricing-card.featured li i {
  color: var(--color-accent-light);
}

/* ---- Process detail (services page) ---- */
.service-detail { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; margin-bottom: var(--space-2xl); }
.service-detail:nth-child(even) .service-detail-text { order: 2; }
.service-detail-visual .frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 4/3; }
.service-detail-visual img { width: 100%; height: 100%; object-fit: cover; }
.service-detail-text .num-tag { font-size: var(--fs-xs); font-weight: 800; color: var(--color-secondary); letter-spacing: 0.05em; }

/* Blog article page bits (if needed inline) */
.blog-pagination { display: flex; justify-content: center; gap: 0.6rem; margin-top: var(--space-2xl); }
.page-btn { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--color-white); border: 1px solid var(--color-line); font-weight: 700; font-size: var(--fs-sm); transition: all var(--dur-fast); }
.page-btn.active, .page-btn:hover { background: var(--gradient-accent); color: #fff; border-color: transparent; }