:root { --ink:#0f1114; --paper:#faf9f7; --cream:#f3f1ec; --warm:#e8e4dc; --accent:#c45d3e; --accent-dark:#a94e33; --accent-light:#f8ece8; --slate:#5a5f6a; --muted:#8b8e95; --green:#3a7d5c; --green-light:#e8f4ed; --border:#e0ddd6; --shadow:rgba(15,17,20,0.06); --shadow-md:rgba(15,17,20,0.1); }
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Outfit',sans-serif; background:var(--paper); color:var(--ink); line-height:1.7; font-weight:400; overflow-x:hidden; }
nav { position:fixed; top:0; width:100%; z-index:100; background:rgba(250,249,247,0.9); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); transition:box-shadow 0.3s; }
nav.scrolled { box-shadow:0 2px 20px var(--shadow); }
.nav-inner { max-width:1200px; margin:0 auto; padding:0 2rem; display:flex; align-items:center; justify-content:space-between; height:72px; }
.nav-logo { font-family:'DM Serif Display',serif; font-size:1.4rem; color:var(--ink); text-decoration:none; letter-spacing:-0.02em; }
.nav-logo span { color:var(--accent); }
.nav-links { display:flex; gap:2rem; align-items:center; list-style:none; }
.nav-links a { text-decoration:none; color:var(--slate); font-size:0.9rem; font-weight:500; transition:color 0.2s; }
.nav-links a:hover { color:var(--ink); }
.nav-cta { background:var(--ink)!important; color:var(--paper)!important; padding:0.6rem 1.4rem; border-radius:6px; font-weight:600!important; transition:background 0.2s!important; }
.nav-cta:hover { background:#2a2d33!important; }
.mobile-toggle { display:none; background:none; border:none; cursor:pointer; padding:0.5rem; }
.mobile-toggle span { display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; transition:0.3s; }
.hero { padding:10rem 2rem 6rem; text-align:center; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; top:-40%; left:-20%; width:140%; height:100%; background:radial-gradient(ellipse at 50% 0%,var(--accent-light) 0%,transparent 60%); opacity:0.5; pointer-events:none; }
.hero-badge { display:inline-flex; align-items:center; gap:0.5rem; padding:0.4rem 1rem; background:var(--green-light); color:var(--green); border-radius:100px; font-size:0.82rem; font-weight:600; margin-bottom:2rem; animation:fadeUp 0.8s ease both; }
.hero-badge::before { content:''; width:6px; height:6px; background:var(--green); border-radius:50%; }
.hero h1 { font-family:'DM Serif Display',serif; font-size:clamp(2.8rem,6vw,4.5rem); line-height:1.1; letter-spacing:-0.03em; max-width:800px; margin:0 auto 1.5rem; animation:fadeUp 0.8s ease 0.1s both; }
.hero h1 em { font-style:italic; color:var(--accent); }
.hero p { font-size:1.15rem; color:var(--slate); max-width:560px; margin:0 auto 2.5rem; line-height:1.8; animation:fadeUp 0.8s ease 0.2s both; }
.hero-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; animation:fadeUp 0.8s ease 0.3s both; }
.btn-primary { background:var(--accent); color:white; padding:0.85rem 2rem; border:none; border-radius:8px; font-size:1rem; font-weight:600; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:0.5rem; transition:background 0.2s,transform 0.15s; font-family:'Outfit',sans-serif; }
.btn-primary:hover { background:var(--accent-dark); transform:translateY(-1px); }
.btn-secondary { background:transparent; color:var(--ink); padding:0.85rem 2rem; border:1.5px solid var(--border); border-radius:8px; font-size:1rem; font-weight:500; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:0.5rem; transition:border-color 0.2s,background 0.2s; font-family:'Outfit',sans-serif; }
.btn-secondary:hover { border-color:var(--ink); background:white; }
.hero-proof { margin-top:3rem; display:flex; align-items:center; justify-content:center; gap:2rem; color:var(--muted); font-size:0.85rem; animation:fadeUp 0.8s ease 0.4s both; }
.hero-proof span { display:flex; align-items:center; gap:0.4rem; }
section { padding:6rem 2rem; }
.section-inner { max-width:1100px; margin:0 auto; }
.section-label { font-size:0.78rem; font-weight:600; text-transform:uppercase; letter-spacing:0.12em; color:var(--accent); margin-bottom:1rem; }
.section-title { font-family:'DM Serif Display',serif; font-size:clamp(2rem,4vw,2.8rem); line-height:1.15; letter-spacing:-0.02em; margin-bottom:1rem; }
.section-subtitle { font-size:1.05rem; color:var(--slate); max-width:560px; line-height:1.8; }
.how-it-works { background:var(--cream); }
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; margin-top:3.5rem; }
.step { position:relative; padding:2.5rem 2rem; background:var(--paper); border-radius:12px; border:1px solid var(--border); transition:transform 0.2s,box-shadow 0.2s; }
.step:hover { transform:translateY(-4px); box-shadow:0 12px 40px var(--shadow); }
.step-number { font-family:'DM Serif Display',serif; font-size:3rem; color:var(--accent); opacity:0.2; position:absolute; top:1.2rem; right:1.5rem; line-height:1; }
.step-icon { width:48px; height:48px; background:var(--accent-light); border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:1.5rem; }
.step-icon svg { width:24px; height:24px; stroke:var(--accent); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.step h3 { font-size:1.15rem; font-weight:600; margin-bottom:0.75rem; }
.step p { color:var(--slate); font-size:0.95rem; line-height:1.7; }
.what-you-get-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; margin-top:3.5rem; }
.benefit-card { padding:2rem; border:1px solid var(--border); border-radius:10px; background:white; display:flex; gap:1.25rem; transition:border-color 0.2s; }
.benefit-card:hover { border-color:var(--accent); }
.benefit-icon { flex-shrink:0; width:40px; height:40px; background:var(--cream); border-radius:8px; display:flex; align-items:center; justify-content:center; }
.benefit-icon svg { width:20px; height:20px; stroke:var(--accent); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.benefit-card h4 { font-size:1rem; font-weight:600; margin-bottom:0.35rem; }
.benefit-card p { font-size:0.9rem; color:var(--slate); line-height:1.6; }
.projects-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:3.5rem; }
.project-card { border:1px solid var(--border); border-radius:14px; overflow:hidden; background:white; transition:transform 0.2s,box-shadow 0.2s; }
.project-card:hover { transform:translateY(-6px); box-shadow:0 16px 48px var(--shadow-md); }
.project-card a { text-decoration:none; color:inherit; display:block; }
.project-thumb { position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--cream); }
.project-thumb img { width:100%; height:100%; object-fit:cover; object-position:top; transition:transform 0.4s; }
.project-card:hover .project-thumb img { transform:scale(1.03); }
.project-info { padding:1.5rem; }
.project-tag { display:inline-block; font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--accent); background:var(--accent-light); padding:0.2rem 0.6rem; border-radius:4px; margin-bottom:0.6rem; }
.project-info h4 { font-size:1.1rem; font-weight:600; margin-bottom:0.35rem; }
.project-info p { font-size:0.88rem; color:var(--slate); line-height:1.6; }
.project-link { display:inline-flex; align-items:center; gap:0.35rem; font-size:0.85rem; font-weight:600; color:var(--accent); margin-top:0.75rem; transition:gap 0.2s; }
.project-card:hover .project-link { gap:0.6rem; }
@media(max-width:900px) { .projects-grid { grid-template-columns:1fr; max-width:480px; margin-left:auto; margin-right:auto; } }
.pricing { background:var(--cream); }
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3.5rem; }
.pricing-card { background:var(--paper); border:1px solid var(--border); border-radius:14px; padding:2.5rem 2rem; position:relative; transition:transform 0.2s,box-shadow 0.2s; }
.pricing-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px var(--shadow); }
.pricing-card.featured { border:2px solid var(--accent); box-shadow:0 8px 30px var(--shadow-md); }
.pricing-card.featured::before { content:'Most Popular'; position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--accent); color:white; padding:0.25rem 1rem; border-radius:100px; font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; }
.pricing-tier { font-size:0.82rem; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:var(--accent); margin-bottom:0.75rem; }
.pricing-amount { display:flex; align-items:baseline; gap:0.25rem; margin-bottom:0.5rem; }
.pricing-amount .dollar { font-size:1.2rem; font-weight:600; color:var(--slate); }
.pricing-amount .price { font-family:'DM Serif Display',serif; font-size:3.2rem; letter-spacing:-0.03em; line-height:1; }
.pricing-amount .period { font-size:0.9rem; color:var(--muted); }
.pricing-desc { font-size:0.9rem; color:var(--slate); margin-bottom:1.5rem; padding-bottom:1.5rem; border-bottom:1px solid var(--border); line-height:1.6; }
.pricing-features { list-style:none; display:flex; flex-direction:column; gap:0.7rem; margin-bottom:2rem; }
.pricing-features li { font-size:0.9rem; color:var(--slate); display:flex; align-items:flex-start; gap:0.6rem; }
.pricing-features li::before { content:'\2713'; color:var(--green); font-weight:700; flex-shrink:0; margin-top:0.1rem; }
.pricing-card .btn-primary,.pricing-card .btn-secondary { width:100%; justify-content:center; }
.pricing-note { text-align:center; margin-top:2rem; color:var(--muted); font-size:0.88rem; }
.free-banner { background:var(--ink); color:var(--paper); padding:4rem 2rem; text-align:center; }
.free-banner .section-label { color:var(--accent); }
.free-banner h2 { font-family:'DM Serif Display',serif; font-size:clamp(2rem,4vw,2.6rem); margin-bottom:1rem; color:white; }
.free-banner p { color:#a0a4ad; max-width:520px; margin:0 auto 2rem; line-height:1.8; }
.content-types { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; margin-top:3.5rem; }
.content-type { text-align:center; padding:2rem 1.25rem; border:1px solid var(--border); border-radius:10px; background:white; transition:transform 0.2s,border-color 0.2s; }
.content-type:hover { transform:translateY(-3px); border-color:var(--accent); }
.content-type-icon { width:56px; height:56px; margin:0 auto 1rem; background:var(--cream); border-radius:12px; display:flex; align-items:center; justify-content:center; }
.content-type-icon svg { width:26px; height:26px; stroke:var(--accent); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.content-type h4 { font-size:0.95rem; font-weight:600; margin-bottom:0.35rem; }
.content-type p { font-size:0.82rem; color:var(--muted); line-height:1.5; }
.faq-list { max-width:700px; margin:3rem auto 0; }
.faq-item { border-bottom:1px solid var(--border); }
.faq-question { width:100%; background:none; border:none; padding:1.25rem 0; font-size:1rem; font-weight:600; text-align:left; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-family:'Outfit',sans-serif; color:var(--ink); transition:color 0.2s; }
.faq-question:hover { color:var(--accent); }
.faq-question::after { content:'+'; font-size:1.3rem; font-weight:300; color:var(--muted); transition:transform 0.3s; }
.faq-item.open .faq-question::after { transform:rotate(45deg); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height 0.3s ease,padding 0.3s ease; }
.faq-item.open .faq-answer { max-height:200px; padding-bottom:1.25rem; }
.faq-answer p { font-size:0.95rem; color:var(--slate); line-height:1.7; }
.final-cta { text-align:center; padding:6rem 2rem; background:linear-gradient(180deg,var(--paper) 0%,var(--cream) 100%); }
.final-cta h2 { font-family:'DM Serif Display',serif; font-size:clamp(2rem,4vw,2.8rem); margin-bottom:1rem; }
.final-cta p { color:var(--slate); max-width:480px; margin:0 auto 2rem; line-height:1.8; }
footer { background:var(--ink); color:#a0a4ad; padding:3rem 2rem; }
.footer-inner { max-width:1100px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; }
.footer-logo { font-family:'DM Serif Display',serif; font-size:1.2rem; color:white; }
.footer-logo span { color:var(--accent); }
.footer-links { display:flex; gap:2rem; list-style:none; }
.footer-links a { color:#a0a4ad; text-decoration:none; font-size:0.88rem; transition:color 0.2s; }
.footer-links a:hover { color:white; }
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.reveal { opacity:0; transform:translateY(24px); transition:opacity 0.7s ease,transform 0.7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
@media(max-width:900px) {
  .steps-grid,.pricing-grid { grid-template-columns:1fr; max-width:480px; margin-left:auto; margin-right:auto; }
  .what-you-get-grid { grid-template-columns:1fr; }
  .content-types { grid-template-columns:repeat(2,1fr); }
  .footer-inner { flex-direction:column; gap:1.5rem; text-align:center; }
}
@media(max-width:640px) {
  .nav-links { display:none; }
  .mobile-toggle { display:block; }
  .nav-links.open { display:flex; flex-direction:column; position:absolute; top:72px; left:0; right:0; background:var(--paper); border-bottom:1px solid var(--border); padding:1.5rem 2rem; gap:1rem; box-shadow:0 8px 30px var(--shadow); }
  .hero { padding:8rem 1.5rem 4rem; }
  .hero h1 { font-size:2.2rem; }
  section { padding:4rem 1.5rem; }
  .content-types { grid-template-columns:1fr; max-width:320px; margin-left:auto; margin-right:auto; }
  .hero-proof { flex-direction:column; gap:0.75rem; }
}
.modal-overlay { display:none; position:fixed; inset:0; z-index:200; background:rgba(15,17,20,0.5); backdrop-filter:blur(4px); align-items:center; justify-content:center; padding:1.5rem; }
.modal-overlay.open { display:flex; animation:modalFadeIn 0.25s ease; }
.modal-card { background:var(--paper); border-radius:16px; padding:2.5rem; max-width:520px; width:100%; position:relative; box-shadow:0 24px 80px rgba(15,17,20,0.2); max-height:90vh; overflow-y:auto; }
.modal-close { position:absolute; top:1rem; right:1.25rem; background:none; border:none; font-size:1.6rem; color:var(--muted); cursor:pointer; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:8px; transition:background 0.15s,color 0.15s; }
.modal-close:hover { background:var(--cream); color:var(--ink); }
.modal-header { margin-bottom:1.75rem; }
.modal-header h3 { font-family:'DM Serif Display',serif; font-size:1.6rem; margin-bottom:0.35rem; }
.modal-header p { color:var(--slate); font-size:0.92rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:0.75rem; }
.form-group { display:flex; flex-direction:column; gap:0.35rem; margin-bottom:0.5rem; }
.form-group label { font-size:0.82rem; font-weight:600; color:var(--ink); }
.form-group input,.form-group textarea { padding:0.7rem 0.9rem; border:1.5px solid var(--border); border-radius:8px; font-size:0.95rem; font-family:'Outfit',sans-serif; background:white; transition:border-color 0.2s; outline:none; color:var(--ink); }
.form-group input:focus,.form-group textarea:focus { border-color:var(--accent); }
.form-group textarea { resize:vertical; min-height:80px; }
.form-group input::placeholder,.form-group textarea::placeholder { color:var(--muted); }
.form-error { color:#c45d3e; font-size:0.82rem; margin-top:0.25rem; display:none; }
.form-group.has-error input,.form-group.has-error textarea { border-color:#c45d3e; }
.form-group.has-error .form-error { display:block; }
#cfSubmit:disabled { opacity:0.6; cursor:not-allowed; transform:none; }
@keyframes modalFadeIn { from{opacity:0;transform:scale(0.96)} to{opacity:1;transform:scale(1)} }
@keyframes successPop { from{transform:scale(0.8);opacity:0} to{transform:scale(1);opacity:1} }
#formSuccess.show { animation:successPop 0.35s ease; }
@media(max-width:640px) { .modal-card { padding:1.75rem 1.5rem; } .form-row { grid-template-columns:1fr; } }

/* ========================================
   ARTICLES STYLES
   ======================================== */
.page-hero {
  padding: 10rem 2rem 4rem;
  text-align: center;
  background: var(--cream);
}
.page-hero h1 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  margin-bottom: 1rem;
}
.page-hero p {
  color: var(--slate);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.8;
}

.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.article-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: white;
  transition: transform 0.2s, box-shadow 0.2s;
}
.article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px var(--shadow);
}
.article-card a {
  text-decoration: none;
  color: inherit;
}
.article-card-image {
  aspect-ratio: 16/9;
  object-fit: cover;
  width: 100%;
  background: var(--cream);
}
.article-card-content {
  padding: 1.5rem;
}
.article-card-date {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.article-card-title {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}
.article-card-excerpt {
  font-size: 0.9rem;
  color: var(--slate);
  line-height: 1.6;
}

/* Single article page */
.article-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 4rem 2rem;
}
.article-content h1 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 1rem;
  line-height: 1.2;
}
.article-meta {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}
.article-body {
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--ink);
}
.article-body h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.6rem;
  margin: 2.5rem 0 1rem;
}
.article-body h3 {
  font-size: 1.25rem;
  margin: 2rem 0 0.75rem;
}
.article-body p {
  margin-bottom: 1.5rem;
}
.article-body ul, .article-body ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}
.article-body li {
  margin-bottom: 0.5rem;
}
.article-body img {
  max-width: 100%;
  border-radius: 8px;
  margin: 2rem 0;
}
.article-body a {
  color: var(--accent);
  text-decoration: underline;
}
.article-body blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  color: var(--slate);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  margin-bottom: 2rem;
}
.back-link:hover {
  text-decoration: underline;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--slate);
}
.empty-state h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: var(--ink);
}