/* SaaSRanger Blog Styles — shared across blog index + all posts */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

:root {
  --forest:      #0f2318;
  --forest-mid:  #1a3528;
  --forest-soft: #244535;
  --grove:       #2d5742;
  --moss:        #3d7a5a;
  --fern:        #5a9e7a;
  --sand:        #e8dcc8;
  --sand-light:  #f2ead8;
  --sand-pale:   #faf6ee;
  --amber:       #c8963c;
  --amber-light: #ddb05a;
  --muted:       rgba(232,220,200,0.5);
  --border:      rgba(93,154,122,0.18);
  --border-s:    rgba(93,154,122,0.35);
  --ink:         #1a1612;
}

body {
  font-family: 'Outfit', sans-serif;
  background: var(--forest);
  color: var(--sand);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  line-height: 1.7;
}

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  padding: 0 64px; height: 74px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(15,35,24,0.92);
  backdrop-filter: blur(28px) saturate(1.8);
  border-bottom: 1px solid var(--border);
}
.logo {
  font-family: 'Playfair Display', serif;
  font-size: 21px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--sand-light); text-decoration: none;
}
.logo em { font-style: italic; color: var(--amber); }
nav ul { list-style: none; display: flex; align-items: center; gap: 38px; }
nav ul a {
  color: var(--muted); text-decoration: none;
  font-size: 13px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase;
  transition: color 0.25s;
}
nav ul a:hover, nav ul a.active { color: var(--sand); }
.nav-cta {
  color: var(--amber) !important;
  border: 1px solid rgba(200,150,60,0.4) !important;
  padding: 9px 26px;
  transition: all 0.25s !important;
}
.nav-cta:hover { background: var(--amber) !important; color: var(--forest) !important; }
.ham { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; background:none; border:none; }
.ham span { display:block; width:24px; height:1.5px; background:var(--sand); transition:all 0.3s; }
.ham.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.ham.open span:nth-child(2) { opacity:0; }
.ham.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }
.mob-menu {
  display:none; position:fixed; inset:0; z-index:400;
  background:var(--forest); flex-direction:column;
  align-items:center; justify-content:center; gap:40px;
  opacity:0; pointer-events:none; transition:opacity 0.3s;
}
.mob-menu.open { opacity:1; pointer-events:all; }
.mob-menu a {
  font-family:'Playfair Display',serif; font-size:36px; font-weight:400;
  color:var(--sand-light); text-decoration:none; transition:color 0.2s;
}
.mob-menu a:hover { color:var(--amber); }
.mob-menu .mob-cta {
  font-family:'Outfit',sans-serif; font-size:13px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase; color:var(--amber) !important;
  border:1px solid rgba(200,150,60,0.4); padding:14px 40px;
}

/* ── FOOTER ── */
footer {
  border-top: 1px solid var(--border); padding: 44px 64px;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--forest); margin-top: 80px;
}
.fl { font-family:'Playfair Display',serif; font-size:19px; font-weight:700; color:var(--sand-light); text-decoration:none; }
.fl em { font-style:italic; color:var(--amber); }
.fn { display:flex; gap:32px; list-style:none; }
.fn a { font-size:11px; font-weight:500; letter-spacing:2px; text-transform:uppercase; color:rgba(232,220,200,0.28); text-decoration:none; transition:color 0.2s; }
.fn a:hover { color:rgba(232,220,200,0.65); }
.fc { font-size:11px; color:rgba(232,220,200,0.18); }

/* ── BREADCRUMB ── */
.breadcrumb {
  padding: 100px 64px 0;
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 500; letter-spacing: 1px;
  color: var(--muted);
}
.breadcrumb a { color: var(--fern); text-decoration: none; transition: color 0.2s; }
.breadcrumb a:hover { color: var(--amber); }
.breadcrumb span { color: rgba(232,220,200,0.25); }

/* ── BUTTONS ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--amber); color: var(--forest);
  padding: 14px 36px; font-size: 12px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; text-decoration: none;
  position: relative; overflow: hidden; transition: all 0.3s;
  font-family: 'Outfit', sans-serif;
}
.btn-primary::after {
  content:''; position:absolute; inset:0;
  background:var(--sand-pale); transform:translateX(-101%);
  transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);
}
.btn-primary:hover::after { transform:translateX(0); }
.btn-primary span { position:relative; z-index:1; }

.btn-outline {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--muted); padding: 14px 36px;
  font-size: 12px; font-weight: 500; letter-spacing: 2px;
  text-transform: uppercase; text-decoration: none;
  border: 1px solid rgba(232,220,200,0.14); transition: all 0.3s;
  font-family: 'Outfit', sans-serif;
}
.btn-outline:hover { color:var(--sand); border-color:rgba(232,220,200,0.32); }

/* ── REVEAL ── */
.r { opacity:0; transform:translateY(24px); transition:opacity 0.85s cubic-bezier(0.16,1,0.3,1), transform 0.85s cubic-bezier(0.16,1,0.3,1); }
.r.in { opacity:1; transform:translateY(0); }
.d1{transition-delay:0.1s} .d2{transition-delay:0.2s} .d3{transition-delay:0.3s}

/* ── MOBILE ── */
@media (max-width: 768px) {
  nav { padding: 0 24px; }
  nav ul { display: none; }
  .ham { display: flex; }
  .mob-menu { display: flex; }
  .breadcrumb { padding: 90px 24px 0; }
  footer { flex-direction:column; gap:24px; padding:36px 24px; text-align:center; }
  .fn { flex-wrap:wrap; justify-content:center; gap:16px; }
}