/* =====================================================
   AkadKu — Sage Green Wedding Organizer Theme
   v1.0.0 | IndoKoding.net
   ===================================================== */

/* 1. TOKENS */
:root {
  --primary:       #7C9A7E;
  --primary-dark:  #5D7B5F;
  --primary-mid:   #9AB89C;
  --primary-light: #EEF4EE;

  --accent:        #C9A96E;
  --accent-dark:   #A8874A;
  --accent-light:  #F9F3E8;

  --white:         #FFFFFF;
  --bg-body:       #FAFDF9;
  --bg-section:    #F3F8F3;
  --bg-dark:       #131A13;
  --border:        #D5E5D5;
  --border-light:  #E8F1E8;

  --text-dark:     #1A2B1A;
  --text-body:     #3A4F3A;
  --text-muted:    #6B8A6B;

  --font-display:  'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-body:     'Lato', 'Inter', -apple-system, sans-serif;

  --radius-sm:     3px;
  --radius:        8px;
  --radius-lg:     14px;
  --radius-xl:     22px;
  --radius-pill:   100px;

  --shadow-sm:     0 1px 4px rgba(93,123,95,.07);
  --shadow:        0 4px 18px rgba(93,123,95,.10);
  --shadow-md:     0 8px 36px rgba(93,123,95,.14);
  --shadow-lg:     0 24px 64px rgba(93,123,95,.20);

  --transition:    .28s ease;
}

:root {
  --bs-font-sans-serif: 'Lato', 'Inter', -apple-system, sans-serif;
  --bs-body-bg: #FAFDF9;
  --bs-body-color: #3A4F3A;
}

/* 2. BASE */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); font-size: 15px; color: var(--text-body); background: var(--bg-body); line-height: 1.75; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }

/* 3. TYPOGRAPHY */
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); font-weight: 700; color: var(--text-dark); line-height: 1.15; }
.section-tag { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: var(--primary-dark); display: inline-flex; align-items: center; gap: .55rem; margin-bottom: .55rem; font-family: var(--font-body); }
.section-tag::before, .section-tag::after { content: '—'; color: var(--accent); font-size: .65rem; }
.section-title { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 700; color: var(--text-dark); line-height: 1.12; }
.section-title em { color: var(--primary-dark); font-style: italic; }
.section-title.on-dark { color: white; }
.section-title.on-dark em { color: var(--accent); }
.section-sub { color: var(--text-muted); font-size: .92rem; margin-top: .6rem; max-width: 540px; }
.section-sub.on-dark { color: rgba(255,255,255,.5); }
.section { padding: 90px 0; }
.section-sm { padding: 48px 0; }
.section-alt { background: var(--bg-section); }
.section-dark { background: var(--bg-dark); }

/* 4. ORNAMENT */
.ornament { color: var(--accent); font-size: .9rem; letter-spacing: .2em; display: block; margin-bottom: .3rem; opacity: .7; }

/* 5. BUTTONS */
.btn-akad, .btn-outline-akad, .btn-accent {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-body); font-weight: 700; border-radius: var(--radius-pill);
  padding: .75rem 1.85rem; font-size: .84rem; cursor: pointer;
  transition: all var(--transition); border: 2px solid transparent;
  text-decoration: none; white-space: nowrap; letter-spacing: .04em;
}
.btn-akad { background: var(--primary); color: white; border-color: var(--primary); }
.btn-akad:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: white; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(93,123,95,.35); }
.btn-outline-akad { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-outline-akad:hover { background: var(--primary); color: white; transform: translateY(-2px); }
.btn-accent { background: var(--accent); color: white; border-color: var(--accent); }
.btn-accent:hover { background: var(--accent-dark); color: white; transform: translateY(-2px); }
.btn-outline-light { background: transparent; color: white; border: 2px solid rgba(255,255,255,.5); border-radius: var(--radius-pill); padding: .75rem 1.85rem; font-size: .84rem; font-weight: 700; display: inline-flex; align-items: center; gap: .45rem; transition: all var(--transition); cursor: pointer; text-decoration: none; letter-spacing: .04em; }
.btn-outline-light:hover { background: rgba(255,255,255,.12); border-color: white; color: white; }
.btn-sm-akad { padding: .42rem 1.1rem; font-size: .78rem; }

/* 6. TOP BAR */
.top-bar { background: var(--bg-dark); color: rgba(255,255,255,.45); font-size: .76rem; font-weight: 500; height: 36px; }
.top-bar .container { height: 100%; display: flex; align-items: center; }
.top-bar .container > .d-flex { width: 100%; }
.top-bar .item { display: flex; align-items: center; gap: .35rem; white-space: nowrap; }
.top-bar .item i { color: var(--accent); font-size: .8rem; }
.top-bar a { color: rgba(255,255,255,.45); transition: color var(--transition); }
.top-bar a:hover { color: var(--accent); }
.top-bar .sep { width: 1px; height: 12px; background: rgba(255,255,255,.12); margin: 0 .65rem; }

/* 7. NAVBAR */
#mainNav { position: fixed; width: 100%; z-index: 1000; transition: background var(--transition), box-shadow var(--transition), padding var(--transition); padding: 1.1rem 0; }
#mainNav:not(.scrolled) { background: transparent; }
#mainNav.scrolled { background: white; box-shadow: 0 2px 24px rgba(93,123,95,.12); padding: .6rem 0; }
.navbar-brand { display: flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: white; letter-spacing: .02em; transition: color var(--transition); }
#mainNav.scrolled .navbar-brand { color: var(--text-dark); }
.brand-logo { width: 36px; height: 36px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: white; flex-shrink: 0; }
.navbar-nav .nav-link { font-size: .83rem; font-weight: 700; color: rgba(255,255,255,.8) !important; padding: .4rem .85rem !important; border-radius: var(--radius-sm); transition: color var(--transition); letter-spacing: .03em; }
#mainNav.scrolled .navbar-nav .nav-link { color: var(--text-body) !important; }
.navbar-nav .nav-link:hover { color: white !important; }
#mainNav.scrolled .navbar-nav .nav-link:hover { color: var(--primary-dark) !important; }
.navbar-nav .nav-link.active { color: var(--accent) !important; }
#mainNav.scrolled .navbar-nav .nav-link.active { color: var(--primary-dark) !important; }
.navbar-toggler-icon { font-size: 1.4rem; color: white; }
#mainNav.scrolled .navbar-toggler-icon { color: var(--text-dark); }

/* 8. HERO */
.hero-section { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
.hero-bg-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; z-index: 0; }
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    to right,
    rgba(19,26,19,.88) 0%,
    rgba(19,26,19,.78) 38%,
    rgba(19,26,19,.45) 65%,
    rgba(19,26,19,.12) 100%
  );
}
.hero-content { position: relative; z-index: 2; width: 100%; padding-top: 150px; padding-bottom: 90px; }
.hero-eyebrow { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .25em; color: var(--accent); font-family: var(--font-body); margin-bottom: 1.1rem; display: flex; align-items: center; gap: .6rem; }
.hero-eyebrow::before, .hero-eyebrow::after { content: '✦'; font-size: .55rem; }
.hero-title { font-family: var(--font-display); font-size: clamp(3rem, 7vw, 6rem); font-weight: 700; color: white; line-height: 1.08; margin-bottom: 1rem; }
.hero-title em { color: var(--accent); font-style: italic; display: block; }
.hero-sub { color: rgba(255,255,255,.62); font-size: clamp(.88rem, 1.3vw, 1rem); margin-bottom: 2.5rem; max-width: 480px; line-height: 1.85; font-family: var(--font-body); }
.hero-cta { display: flex; gap: .85rem; flex-wrap: wrap; margin-bottom: 3rem; }
.hero-couples { display: flex; align-items: center; gap: .75rem; }
.hero-couples-imgs { display: flex; }
.hero-couples-imgs img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.3); margin-left: -10px; }
.hero-couples-imgs img:first-child { margin-left: 0; }
.hero-couples-text { font-size: .8rem; color: rgba(255,255,255,.6); font-family: var(--font-body); }
.hero-couples-text strong { color: var(--accent); font-weight: 700; }

/* 9. SERVICE CARDS */
.service-card { background: white; border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 2rem 1.75rem; text-align: center; transition: all var(--transition); position: relative; overflow: hidden; }
.service-card::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--primary); border-radius: var(--radius-xl); opacity: 0; transition: opacity var(--transition); pointer-events: none; }
.service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.service-card:hover::after { opacity: 1; }
.svc-icon { width: 64px; height: 64px; background: var(--primary-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--primary-dark); margin: 0 auto 1.1rem; transition: all var(--transition); }
.service-card:hover .svc-icon { background: var(--primary); color: white; }
.svc-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--text-dark); margin-bottom: .5rem; }
.svc-desc { font-size: .84rem; color: var(--text-muted); line-height: 1.75; }

/* 10. PACKAGE CARDS */
.pkg-card { background: white; border: 1.5px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; transition: all var(--transition); position: relative; height: 100%; }
.pkg-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.pkg-card.featured { border-color: var(--accent); }
.pkg-badge { position: absolute; top: 1.25rem; right: 1.25rem; background: var(--accent); color: white; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: .28rem .85rem; border-radius: var(--radius-pill); font-family: var(--font-body); }
.pkg-header { padding: 2rem 2rem 1.5rem; border-bottom: 1px solid var(--border-light); }
.pkg-name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--text-dark); }
.pkg-name em { color: var(--primary-dark); font-style: italic; }
.pkg-price { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; color: var(--primary-dark); line-height: 1; margin-top: .75rem; }
.pkg-price sub { font-size: .9rem; font-weight: 400; color: var(--text-muted); vertical-align: middle; font-family: var(--font-body); }
.pkg-sub { font-size: .8rem; color: var(--text-muted); margin-top: .25rem; font-family: var(--font-body); }
.pkg-body { padding: 1.5rem 2rem 2rem; }
.pkg-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.pkg-list li { display: flex; align-items: flex-start; gap: .6rem; font-size: .86rem; color: var(--text-body); padding: .45rem 0; border-bottom: 1px solid var(--border-light); }
.pkg-list li:last-child { border-bottom: none; }
.pkg-list li i { color: var(--primary); font-size: .85rem; margin-top: 3px; flex-shrink: 0; }
.pkg-list li.disabled { color: var(--text-muted); text-decoration: line-through; }
.pkg-list li.disabled i { color: var(--border); }

/* 11. VENDOR CARDS */
.vendor-card { background: white; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: all var(--transition); }
.vendor-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.vendor-photo { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--bg-section); }
.vendor-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.vendor-card:hover .vendor-photo img { transform: scale(1.06); }
.vendor-cat-badge { position: absolute; top: .75rem; left: .75rem; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 10px; border-radius: var(--radius-pill); background: rgba(19,26,19,.65); color: white; backdrop-filter: blur(4px); font-family: var(--font-body); }
.vendor-body { padding: 1rem 1.1rem 1.2rem; }
.vendor-name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--text-dark); margin-bottom: .2rem; }
.vendor-spec { font-size: .76rem; color: var(--primary-dark); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; font-family: var(--font-body); margin-bottom: .45rem; }
.vendor-stars { color: var(--accent); font-size: .78rem; letter-spacing: 1px; }
.vendor-price { font-size: .82rem; color: var(--text-muted); font-family: var(--font-body); margin-top: .3rem; }

/* 12. GALLERY */
.gallery-grid { columns: 3; column-gap: .85rem; }
@media (max-width: 767px) { .gallery-grid { columns: 2; } }
@media (max-width: 575px) { .gallery-grid { columns: 1; } }
.gallery-item { break-inside: avoid; margin-bottom: .85rem; border-radius: var(--radius-lg); overflow: hidden; position: relative; cursor: pointer; }
.gallery-item img { width: 100%; display: block; transition: transform .45s ease; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item-overlay { position: absolute; inset: 0; background: rgba(19,26,19,.45); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--transition); }
.gallery-item:hover .gallery-item-overlay { opacity: 1; }
.gallery-item-overlay i { color: white; font-size: 1.6rem; }

/* 13. TESTIMONIAL CARDS */
.testi-card { background: white; border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 1.75rem; box-shadow: var(--shadow-sm); height: 100%; display: flex; flex-direction: column; position: relative; }
.testi-quote { font-family: var(--font-display); font-size: 3.5rem; color: var(--primary-light); line-height: 1; position: absolute; top: .75rem; left: 1.5rem; }
.testi-stars { color: var(--accent); font-size: .85rem; letter-spacing: 2px; margin-bottom: .9rem; padding-top: 1.5rem; }
.testi-text { font-family: var(--font-display); font-size: .98rem; color: var(--text-body); line-height: 1.85; flex: 1; font-style: italic; margin-bottom: 1.25rem; }
.testi-couple { display: flex; align-items: center; gap: .75rem; }
.testi-photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary-light); }
.testi-name { font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--text-dark); }
.testi-date { font-size: .72rem; color: var(--text-muted); font-family: var(--font-body); display: flex; align-items: center; gap: .3rem; margin-top: .1rem; }
.testi-date i { color: var(--accent); }

/* 14. STATS DARK */
.stats-dark { background: var(--bg-dark); padding: 70px 0; position: relative; overflow: hidden; }
.stats-dark::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(124,154,126,.12) 0%, transparent 65%); }
.stat-block { text-align: center; position: relative; z-index: 1; }
.stat-num { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4rem); color: var(--accent); line-height: 1; }
.stat-lbl { font-size: .76rem; font-weight: 700; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .1em; margin-top: .5rem; font-family: var(--font-body); }

/* 15. JOURNEY / TIMELINE */
.journey-step { display: flex; gap: 1.5rem; align-items: flex-start; }
.journey-step-num { width: 52px; height: 52px; border-radius: 50%; background: var(--primary-light); border: 2px solid var(--primary); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--primary-dark); flex-shrink: 0; position: relative; z-index: 1; }
.journey-step-line { position: relative; }
.journey-step-line::before { content: ''; position: absolute; left: 25px; top: 52px; bottom: -1.5rem; width: 1px; background: linear-gradient(to bottom, var(--border), transparent); }
.journey-step:last-child .journey-step-line::before { display: none; }
.journey-step-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--text-dark); margin-bottom: .3rem; }
.journey-step-desc { font-size: .85rem; color: var(--text-muted); line-height: 1.75; }

/* 16. PAGE HEADER */
.page-header { background: var(--bg-dark); padding: 5.5rem 0 3rem; position: relative; overflow: hidden; }
.page-header-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .18; z-index: 0; }
.page-header::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(19,26,19,.7), rgba(19,26,19,.9)); z-index: 1; }
.page-header .container { position: relative; z-index: 2; }
.page-header .breadcrumb-item, .page-header .breadcrumb-item a { color: rgba(255,255,255,.38); font-size: .8rem; }
.page-header .breadcrumb-item.active { color: var(--accent); }
.page-header .breadcrumb-item+.breadcrumb-item::before { color: rgba(255,255,255,.2); }
.page-header h1 { font-family: var(--font-display); color: white; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 700; }
.page-header h1 em { color: var(--accent); font-style: italic; }
.page-header p { color: rgba(255,255,255,.5); font-size: .9rem; margin-top: .4rem; font-family: var(--font-body); }

/* 17. FILTER BUTTONS */
.filter-row { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.filter-btn { display: inline-flex; align-items: center; gap: .3rem; padding: .42rem 1.1rem; border: 1.5px solid var(--border); border-radius: var(--radius-pill); font-size: .79rem; font-weight: 700; color: var(--text-muted); background: white; cursor: pointer; transition: all var(--transition); white-space: nowrap; font-family: var(--font-body); letter-spacing: .02em; }
.filter-btn.active, .filter-btn:hover { background: var(--primary); color: white; border-color: var(--primary); }

/* 18. BLOG CARDS */
.blog-card { background: white; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); display: flex; flex-direction: column; height: 100%; }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.blog-img { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-section); flex-shrink: 0; }
.blog-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.blog-card:hover .blog-img img { transform: scale(1.05); }
.blog-cat { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; padding: 3px 10px; border-radius: var(--radius-pill); display: inline-flex; font-family: var(--font-body); }
.blog-cat.inspirasi  { background: var(--primary-light); color: var(--primary-dark); }
.blog-cat.tips       { background: var(--accent-light); color: var(--accent-dark); }
.blog-cat.cerita     { background: #EEF0FF; color: #4355B9; }
.blog-cat.vendor     { background: #FFF0F5; color: #B03060; }
.blog-body { padding: 1.1rem 1.25rem 1.25rem; flex: 1; display: flex; flex-direction: column; }
.blog-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--text-dark); line-height: 1.35; margin: .45rem 0 .55rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-title a { color: inherit; }
.blog-title a:hover { color: var(--primary-dark); }
.blog-excerpt { font-size: .84rem; color: var(--text-muted); line-height: 1.7; margin-bottom: .85rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.blog-meta { display: flex; align-items: center; gap: .75rem; font-size: .73rem; color: var(--text-muted); font-weight: 600; margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--border-light); flex-wrap: wrap; font-family: var(--font-body); }
.blog-meta i { color: var(--primary); }
.blog-meta .read-time { margin-left: auto; }

/* Sidebar */
.sidebar-widget { background: white; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.35rem; margin-bottom: 1.35rem; }
.sidebar-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--text-dark); margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; }
.sidebar-title i { color: var(--primary); }
.sidebar-recent-item { display: flex; gap: .75rem; padding: .65rem 0; border-bottom: 1px solid var(--border-light); }
.sidebar-recent-item:last-child { border-bottom: none; }
.sidebar-recent-img { width: 62px; height: 52px; border-radius: var(--radius); overflow: hidden; flex-shrink: 0; }
.sidebar-recent-img img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-recent-title a { font-family: var(--font-display); font-size: .86rem; font-weight: 700; color: var(--text-dark); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sidebar-recent-title a:hover { color: var(--primary-dark); }
.sidebar-recent-date { font-size: .7rem; color: var(--text-muted); display: flex; align-items: center; gap: .3rem; margin-top: .2rem; }
.sidebar-recent-date i { color: var(--accent); }
.sidebar-cta { background: linear-gradient(135deg, var(--bg-dark), #2A3A2A); border-radius: var(--radius-lg); padding: 1.5rem 1.35rem; color: white; text-align: center; }
.sidebar-cta h6 { font-family: var(--font-display); font-size: 1.15rem; color: white; margin-bottom: .5rem; }
.sidebar-cta p { font-size: .83rem; color: rgba(255,255,255,.5); margin-bottom: 1rem; font-family: var(--font-body); }

/* 19. FORM */
.form-card { background: white; border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 2.5rem; box-shadow: var(--shadow); }
.form-card .form-label { font-size: .81rem; font-weight: 700; color: var(--text-dark); text-transform: uppercase; letter-spacing: .07em; margin-bottom: .45rem; font-family: var(--font-body); }
.form-card .form-control, .form-card .form-select { border-color: var(--border); font-size: .88rem; background: var(--bg-body); border-radius: var(--radius); }
.form-card .form-control:focus, .form-card .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(124,154,126,.15); }

/* 20. CTA SECTION */
.cta-section { background: var(--bg-dark); padding: 90px 0; position: relative; overflow: hidden; }
.cta-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(124,154,126,.14) 0%, transparent 65%); }
.cta-section > .container { position: relative; z-index: 1; }
.cta-title { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 4rem); color: white; line-height: 1.1; }
.cta-title em { color: var(--accent); font-style: italic; }
.cta-sub { color: rgba(255,255,255,.45); font-size: .93rem; margin-top: .9rem; margin-bottom: 2.25rem; max-width: 520px; line-height: 1.8; }

/* 21. FOOTER */
.footer { background: #0A0F0A; color: rgba(255,255,255,.4); padding: 70px 0 0; }
.footer h6 { font-family: var(--font-body); font-size: .83rem; font-weight: 700; color: rgba(255,255,255,.75); margin-bottom: 1rem; text-transform: uppercase; letter-spacing: .1em; }
.footer-brand { display: flex; align-items: center; gap: .55rem; margin-bottom: 1rem; }
.footer-desc { font-size: .83rem; line-height: 1.8; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .45rem; }
.footer-links a { font-size: .84rem; color: rgba(255,255,255,.4); transition: color var(--transition); }
.footer-links a:hover { color: var(--accent); }
.footer-contact-item { display: flex; gap: .65rem; align-items: flex-start; font-size: .83rem; margin-bottom: .75rem; }
.footer-contact-item i { color: var(--accent); font-size: .88rem; margin-top: 3px; flex-shrink: 0; }
.footer-social { display: flex; gap: .5rem; }
.footer-social a { width: 34px; height: 34px; background: rgba(255,255,255,.07); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.5); font-size: .88rem; transition: all var(--transition); }
.footer-social a:hover { background: var(--primary); color: white; }
.footer-divider { border-color: rgba(255,255,255,.07); margin: 2.5rem 0 0; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; padding: 1.25rem 0; font-size: .78rem; }

/* 22. BACK TO TOP */
#backToTop { position: fixed; bottom: 1.75rem; right: 1.75rem; width: 42px; height: 42px; background: var(--primary); color: white; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; cursor: pointer; z-index: 900; opacity: 0; visibility: hidden; transition: all var(--transition); box-shadow: 0 4px 14px rgba(93,123,95,.4); }
#backToTop.visible { opacity: 1; visibility: visible; }
#backToTop:hover { background: var(--primary-dark); transform: translateY(-3px); }

/* 23. RESPONSIVE */
@media (max-width: 991px) {
  .section { padding: 64px 0; }
  .hero-content { padding-top: 130px; }
}
@media (max-width: 767px) {
  .section { padding: 50px 0; }
  .cta-section { padding: 60px 0; }
  .stats-dark { padding: 50px 0; }
}