/* Asseto Blog — Shared Stylesheet
   Inherits brand language from index.html
   Optimized for: long-form reading, mobile-first, conversion */

* { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg-base: #070c14;
  --bg-card: rgba(10,18,32,0.52);
  --bg-card-hover: rgba(16,26,46,0.65);
  --gold: #c8a96e;
  --gold-soft: rgba(200,169,110,0.28);
  --gold-glow: rgba(200,169,110,0.12);
  --text: #f0ede6;
  --text-soft: rgba(240,237,230,0.72);
  --text-mute: rgba(240,237,230,0.52);
  --text-faint: rgba(255,255,255,0.32);
  --border: rgba(255,255,255,0.14);
  --border-soft: rgba(255,255,255,0.08);
}

html { scroll-behavior:smooth; }

body {
  font-family:'Heebo',sans-serif;
  color:var(--text);
  min-height:100vh;
  background:var(--bg-base) url('https://images.unsplash.com/photo-1444723121867-7a241cacace9?w=1920&q=80') center center / cover no-repeat fixed;
  position:relative;
  line-height:1.6;
}
body::before {
  content:'';
  position:fixed;
  inset:0;
  background:
    linear-gradient(to bottom, rgba(7,12,20,0.82) 0%, rgba(7,12,20,0.72) 40%, rgba(7,12,20,0.92) 100%),
    radial-gradient(ellipse at 20% 10%, rgba(22,40,80,0.45) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 85%, rgba(14,28,58,0.4) 0%, transparent 50%);
  z-index:0;
  pointer-events:none;
}
body > * { position:relative; z-index:1; }

/* ===== Reading progress bar ===== */
.read-progress {
  position:fixed; top:0; left:0; right:0;
  height:3px;
  background:transparent;
  z-index:100;
}
.read-progress-bar {
  height:100%;
  background:linear-gradient(to right, var(--gold), #e0c890);
  width:0%;
  transition:width 0.1s ease-out;
  box-shadow:0 0 8px var(--gold-soft);
}

/* ===== Navigation ===== */
.nav {
  display:flex; justify-content:space-between; align-items:center;
  padding:1.2rem 2rem;
  border-bottom:1px solid var(--border-soft);
  position:sticky; top:0;
  background:rgba(7,12,20,0.78);
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  z-index:20;
}
.nav-logo {
  font-size:1.4rem; font-weight:700; letter-spacing:-0.5px;
  color:var(--text); text-decoration:none;
}
.nav-logo em { color:var(--gold); font-style:normal; }
.nav-links { display:flex; align-items:center; gap:1.5rem; }
.nav-link {
  font-size:0.85rem; color:var(--text-mute);
  text-decoration:none; transition:color 0.2s;
}
.nav-link:hover { color:var(--gold); }
.nav-link.active { color:var(--gold); }

@media (max-width:640px) {
  .nav { padding:1rem 1.2rem; }
  .nav-links { gap:1rem; }
  .nav-link { font-size:0.78rem; }
  .nav-logo { font-size:1.2rem; }
}

/* ===== Container ===== */
.container { max-width:1100px; margin:0 auto; padding:0 2rem; }
.container-narrow { max-width:760px; margin:0 auto; padding:0 2rem; }

@media (max-width:640px) {
  .container, .container-narrow { padding:0 1.2rem; }
}

/* ===== Breadcrumb ===== */
.breadcrumb {
  font-size:0.78rem;
  color:var(--text-mute);
  padding:1.5rem 0 0.5rem;
  display:flex; gap:0.4rem; align-items:center; flex-wrap:wrap;
}
.breadcrumb a { color:var(--text-mute); text-decoration:none; transition:color 0.2s; }
.breadcrumb a:hover { color:var(--gold); }
.breadcrumb-sep { color:var(--text-faint); }
.breadcrumb .current { color:var(--text); }

/* ===== Article Hero ===== */
.article-hero { padding:2.5rem 0 2rem; }
.article-meta {
  display:flex; gap:1.2rem; align-items:center;
  font-size:0.78rem; color:var(--text-mute);
  margin-bottom:1.2rem; flex-wrap:wrap;
}
.article-category {
  display:inline-block;
  background:var(--gold-glow);
  border:1px solid var(--gold-soft);
  color:var(--gold);
  padding:4px 12px;
  border-radius:100px;
  font-size:0.72rem;
  letter-spacing:0.5px;
  font-weight:500;
}
.article-meta-dot { width:3px; height:3px; border-radius:50%; background:var(--text-faint); }
.article-title {
  font-size:clamp(1.9rem, 4.5vw, 3rem);
  font-weight:900;
  line-height:1.15;
  letter-spacing:-1.5px;
  margin-bottom:1rem;
}
.article-title em { color:var(--gold); font-style:normal; }
.article-subtitle {
  font-size:clamp(1.05rem, 2vw, 1.25rem);
  color:var(--text-soft);
  font-weight:300;
  line-height:1.5;
  max-width:640px;
}
.article-divider {
  height:1px;
  background:linear-gradient(to right, var(--gold-soft) 0%, transparent 60%);
  margin:2rem 0 0;
}

/* ===== TL;DR Box ===== */
.tldr {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-right:3px solid var(--gold);
  padding:1.4rem 1.6rem;
  border-radius:10px;
  margin:2rem 0;
  backdrop-filter:blur(14px);
}
.tldr-label {
  font-size:0.72rem;
  letter-spacing:1.5px;
  color:var(--gold);
  font-weight:700;
  margin-bottom:0.6rem;
}
.tldr-text {
  font-size:0.98rem;
  color:var(--text-soft);
  line-height:1.65;
}

/* ===== Article Body ===== */
.article-body {
  font-size:1.05rem;
  line-height:1.85;
  color:var(--text-soft);
  padding:1.5rem 0 3rem;
}
.article-body > p {
  margin:0 0 1.4rem;
}
.article-body h2 {
  font-size:1.7rem;
  font-weight:700;
  color:var(--text);
  margin:3rem 0 1rem;
  letter-spacing:-0.5px;
  line-height:1.3;
}
.article-body h2::before {
  content:'';
  display:block;
  width:36px;
  height:2px;
  background:var(--gold);
  margin-bottom:0.7rem;
  border-radius:2px;
}
.article-body h3 {
  font-size:1.3rem;
  font-weight:700;
  color:var(--text);
  margin:2.2rem 0 0.8rem;
  letter-spacing:-0.3px;
}
.article-body strong { color:var(--text); font-weight:700; }
.article-body em { color:var(--gold); font-style:normal; }
.article-body ul, .article-body ol {
  margin:1rem 0 1.5rem;
  padding-right:1.5rem;
}
.article-body li {
  margin-bottom:0.7rem;
  line-height:1.7;
}
.article-body a {
  color:var(--gold);
  text-decoration:none;
  border-bottom:1px solid var(--gold-soft);
  transition:border-color 0.2s;
}
.article-body a:hover { border-bottom-color:var(--gold); }

/* Pull quote */
.pull-quote {
  margin:2.5rem 0;
  padding:1.5rem 1.8rem;
  border-right:3px solid var(--gold);
  background:rgba(200,169,110,0.05);
  font-size:1.15rem;
  font-weight:500;
  color:var(--text);
  line-height:1.55;
  border-radius:0 8px 8px 0;
  font-style:italic;
}

/* Numbered checklist */
.checklist {
  margin:1.5rem 0;
  padding:0;
  list-style:none;
}
.checklist > li {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:1.4rem 1.6rem;
  margin-bottom:1rem;
  position:relative;
  backdrop-filter:blur(12px);
}
.checklist > li::before {
  content:counter(checklist-item);
  counter-increment:checklist-item;
  position:absolute;
  top:1.4rem; right:-14px;
  width:32px; height:32px;
  background:var(--gold);
  color:#0a0e16;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
  font-size:0.95rem;
  box-shadow:0 4px 12px rgba(200,169,110,0.3);
}
.checklist {
  counter-reset:checklist-item;
  padding-right:1.5rem;
}
.checklist h3 {
  font-size:1.1rem;
  font-weight:700;
  color:var(--text);
  margin:0 0 0.5rem;
  padding-right:1.5rem;
}
.checklist p {
  font-size:0.97rem;
  color:var(--text-soft);
  margin:0;
  padding-right:1.5rem;
  line-height:1.65;
}

/* Inline CTA */
.inline-cta {
  margin:2.5rem 0;
  padding:1.6rem 1.8rem;
  background:linear-gradient(135deg, rgba(200,169,110,0.08) 0%, rgba(200,169,110,0.02) 100%);
  border:1px solid var(--gold-soft);
  border-radius:14px;
  text-align:center;
  backdrop-filter:blur(12px);
}
.inline-cta-title {
  font-size:1.05rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:0.5rem;
}
.inline-cta-text {
  font-size:0.92rem;
  color:var(--text-mute);
  margin-bottom:1rem;
  line-height:1.6;
}
.inline-cta-btn {
  display:inline-block;
  background:var(--gold);
  color:#0a0e16;
  padding:0.7rem 1.6rem;
  border-radius:100px;
  font-weight:700;
  font-size:0.92rem;
  text-decoration:none;
  transition:all 0.2s;
  box-shadow:0 4px 14px rgba(200,169,110,0.25);
}
.inline-cta-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(200,169,110,0.4);
}

/* Final CTA */
.final-cta {
  margin:3rem 0 2rem;
  padding:2.5rem 2rem;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-top:1px solid rgba(200,169,110,0.4);
  border-radius:18px;
  text-align:center;
  backdrop-filter:blur(20px);
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
}
.final-cta-eyebrow {
  font-size:0.72rem;
  letter-spacing:2px;
  color:var(--gold);
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:0.8rem;
}
.final-cta-title {
  font-size:clamp(1.4rem,3vw,1.9rem);
  font-weight:900;
  letter-spacing:-0.8px;
  line-height:1.25;
  margin-bottom:0.8rem;
}
.final-cta-title em { color:var(--gold); font-style:normal; }
.final-cta-text {
  font-size:1rem;
  color:var(--text-soft);
  margin-bottom:1.6rem;
  max-width:480px;
  margin-left:auto; margin-right:auto;
  line-height:1.6;
}
.final-cta-btn {
  display:inline-block;
  background:var(--gold);
  color:#0a0e16;
  padding:0.95rem 2.2rem;
  border-radius:100px;
  font-weight:700;
  font-size:1rem;
  text-decoration:none;
  transition:all 0.25s;
  box-shadow:0 6px 20px rgba(200,169,110,0.3);
}
.final-cta-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(200,169,110,0.5);
}

/* ===== Related articles ===== */
.related {
  margin:3rem 0 2rem;
  padding-top:2rem;
  border-top:1px solid var(--border-soft);
}
.related-label {
  font-size:0.72rem;
  letter-spacing:2px;
  color:var(--text-mute);
  text-transform:uppercase;
  margin-bottom:1.2rem;
  font-weight:600;
}
.related-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.2rem;
}
@media (max-width:640px) {
  .related-grid { grid-template-columns:1fr; }
}

/* ===== Article card (used in hub, category, related) ===== */
.article-card {
  display:block;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-top:1px solid rgba(255,255,255,0.22);
  border-radius:14px;
  padding:1.5rem;
  text-decoration:none;
  color:var(--text);
  transition:all 0.3s;
  backdrop-filter:blur(18px);
}
.article-card:hover {
  background:var(--bg-card-hover);
  border-color:var(--gold-soft);
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(0,0,0,0.4);
}
.article-card-meta {
  display:flex; gap:0.8rem; align-items:center;
  font-size:0.72rem; color:var(--text-mute);
  margin-bottom:0.8rem;
}
.article-card-cat {
  background:var(--gold-glow);
  color:var(--gold);
  padding:3px 10px;
  border-radius:100px;
  font-size:0.7rem;
  letter-spacing:0.4px;
}
.article-card-title {
  font-size:1.15rem;
  font-weight:700;
  line-height:1.35;
  letter-spacing:-0.3px;
  margin-bottom:0.6rem;
}
.article-card-desc {
  font-size:0.9rem;
  color:var(--text-mute);
  line-height:1.55;
}

/* Hub featured card */
.featured-card {
  display:block;
  background:linear-gradient(135deg, rgba(20,32,56,0.65) 0%, rgba(10,18,32,0.6) 100%);
  border:1px solid var(--border);
  border-top:1px solid rgba(200,169,110,0.5);
  border-radius:18px;
  padding:2.2rem 2rem;
  text-decoration:none;
  color:var(--text);
  transition:all 0.3s;
  backdrop-filter:blur(20px);
  margin-bottom:2rem;
  position:relative;
  overflow:hidden;
}
.featured-card::before {
  content:'';
  position:absolute;
  top:0; right:0;
  width:140px; height:140px;
  background:radial-gradient(circle, var(--gold-glow) 0%, transparent 70%);
  pointer-events:none;
}
.featured-card:hover {
  transform:translateY(-3px);
  border-color:var(--gold-soft);
  box-shadow:0 16px 40px rgba(0,0,0,0.5);
}
.featured-label {
  font-size:0.7rem;
  letter-spacing:2px;
  color:var(--gold);
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:1rem;
}
.featured-title {
  font-size:clamp(1.4rem,2.8vw,1.9rem);
  font-weight:900;
  line-height:1.25;
  letter-spacing:-0.7px;
  margin-bottom:0.8rem;
}
.featured-desc {
  font-size:1rem;
  color:var(--text-soft);
  line-height:1.6;
  margin-bottom:1rem;
  max-width:600px;
}
.featured-meta {
  font-size:0.78rem;
  color:var(--text-mute);
  display:flex; gap:1rem; align-items:center;
}

/* Hub persona cards */
.persona-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
  margin:2.5rem 0;
}
@media (max-width:760px) {
  .persona-grid { grid-template-columns:1fr; gap:1.2rem; }
}
.persona-card {
  display:block;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-top:1px solid rgba(255,255,255,0.22);
  border-radius:18px;
  padding:2rem;
  text-decoration:none;
  color:var(--text);
  transition:all 0.3s;
  backdrop-filter:blur(20px);
}
.persona-card:hover {
  background:var(--bg-card-hover);
  border-top-color:var(--gold);
  transform:translateY(-4px);
}
.persona-icon {
  font-size:2rem;
  margin-bottom:1rem;
  display:inline-block;
}
.persona-title {
  font-size:1.3rem;
  font-weight:800;
  letter-spacing:-0.3px;
  margin-bottom:0.5rem;
}
.persona-text {
  font-size:0.92rem;
  color:var(--text-mute);
  line-height:1.6;
  margin-bottom:1rem;
}
.persona-link {
  font-size:0.85rem;
  color:var(--gold);
  font-weight:600;
}

/* Section title */
.section-title {
  font-size:0.75rem;
  letter-spacing:2px;
  color:var(--text-mute);
  text-transform:uppercase;
  font-weight:600;
  margin:2.5rem 0 1.2rem;
}

/* Hub hero */
.hub-hero {
  text-align:center;
  padding:3rem 0 2rem;
  border-bottom:1px solid var(--border-soft);
  margin-bottom:2rem;
}
.hub-hero-eyebrow {
  font-size:0.72rem;
  letter-spacing:2.5px;
  color:var(--gold);
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:1rem;
}
.hub-hero-title {
  font-size:clamp(2rem,5vw,3.4rem);
  font-weight:900;
  letter-spacing:-1.5px;
  line-height:1.1;
  margin-bottom:1rem;
}
.hub-hero-title em { color:var(--gold); font-style:normal; }
.hub-hero-text {
  font-size:1.05rem;
  color:var(--text-soft);
  font-weight:300;
  line-height:1.6;
  max-width:560px;
  margin:0 auto;
}

/* Articles list (category page) */
.articles-list {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.2rem;
  margin:1.5rem 0 3rem;
}
@media (max-width:760px) { .articles-list { grid-template-columns:1fr; } }

/* Footer */
.blog-footer {
  border-top:1px solid var(--border-soft);
  padding:2.5rem 0;
  margin-top:3rem;
  text-align:center;
}
.blog-footer-text {
  font-size:0.85rem;
  color:var(--text-mute);
  margin-bottom:0.5rem;
}
.blog-footer-text a { color:var(--gold); text-decoration:none; }
.blog-footer-sub {
  font-size:0.72rem;
  color:var(--text-faint);
}

/* ===== Share Story Widget ===== */
.share-story {
  margin:3rem 0 2rem;
  padding-top:2rem;
  border-top:1px solid var(--border-soft);
}
.share-trigger {
  width:100%;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-top:1px solid rgba(200,169,110,0.35);
  border-radius:14px;
  padding:1.2rem 1.4rem;
  color:var(--text);
  font-family:'Heebo',sans-serif;
  font-size:0.98rem;
  font-weight:500;
  text-align:right;
  cursor:pointer;
  transition:all 0.25s;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  backdrop-filter:blur(14px);
}
.share-trigger:hover {
  background:var(--bg-card-hover);
  border-top-color:var(--gold);
  transform:translateY(-2px);
}
.share-trigger-text { line-height:1.4; }
.share-trigger-arrow {
  color:var(--gold);
  font-size:1.1rem;
  transition:transform 0.2s;
}
.share-trigger:hover .share-trigger-arrow { transform:translateX(-4px); }
.share-trigger.open .share-trigger-arrow { transform:rotate(90deg); }

.share-form {
  margin-top:1rem;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:1.6rem 1.8rem;
  backdrop-filter:blur(14px);
  animation:shareSlideIn 0.35s ease;
}
@keyframes shareSlideIn {
  from { opacity:0; transform:translateY(-8px); }
  to { opacity:1; transform:translateY(0); }
}
.share-form-title {
  font-size:1.15rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:0.3rem;
}
.share-form-subtitle {
  font-size:0.88rem;
  color:var(--text-mute);
  margin-bottom:1.2rem;
  line-height:1.55;
}
.share-form input[type="text"],
.share-form input[type="email"],
.share-form select,
.share-form textarea {
  width:100%;
  background:rgba(7,12,20,0.55);
  border:1px solid var(--border);
  border-radius:10px;
  padding:0.75rem 0.95rem;
  color:var(--text);
  font-family:'Heebo',sans-serif;
  font-size:0.92rem;
  margin-bottom:0.8rem;
  transition:border-color 0.2s, background 0.2s;
}
.share-form input:focus,
.share-form select:focus,
.share-form textarea:focus {
  outline:none;
  border-color:var(--gold-soft);
  background:rgba(10,18,32,0.7);
}
.share-form textarea {
  resize:vertical;
  min-height:90px;
  line-height:1.5;
}
.share-form select {
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23c8a96e' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 0.95rem center;
  padding-left:2.2rem;
}
.share-checkbox {
  display:flex;
  gap:0.6rem;
  align-items:flex-start;
  font-size:0.85rem;
  color:var(--text-mute);
  line-height:1.5;
  margin:0.6rem 0 1rem;
  cursor:pointer;
}
.share-checkbox input[type="checkbox"] {
  margin-top:3px;
  flex-shrink:0;
  accent-color:var(--gold);
  width:16px; height:16px;
}
.share-submit {
  background:var(--gold);
  color:#0a0e16;
  border:none;
  padding:0.85rem 2rem;
  border-radius:100px;
  font-family:'Heebo',sans-serif;
  font-weight:700;
  font-size:0.95rem;
  cursor:pointer;
  transition:all 0.2s;
  box-shadow:0 4px 14px rgba(200,169,110,0.25);
}
.share-submit:hover:not(:disabled) {
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(200,169,110,0.4);
}
.share-submit:disabled {
  opacity:0.5;
  cursor:not-allowed;
  transform:none;
}
.share-status {
  margin-top:0.8rem;
  font-size:0.85rem;
  color:#ff8a8a;
  min-height:1.2em;
}
.share-thanks {
  margin-top:1rem;
  background:linear-gradient(135deg, rgba(200,169,110,0.12) 0%, rgba(200,169,110,0.04) 100%);
  border:1px solid var(--gold-soft);
  border-radius:14px;
  padding:1.6rem 1.8rem;
  backdrop-filter:blur(14px);
  text-align:center;
}
.share-thanks h3 {
  font-size:1.25rem;
  color:var(--gold);
  margin-bottom:0.5rem;
  font-weight:700;
}
.share-thanks p {
  color:var(--text-soft);
  font-size:0.95rem;
  line-height:1.6;
}

@media (max-width:640px) {
  .share-form { padding:1.3rem 1.4rem; }
  .share-trigger { padding:1.05rem 1.2rem; font-size:0.92rem; }
}

/* Mobile typography refinements */
@media (max-width:640px) {
  .article-body { font-size:1rem; }
  .article-body h2 { font-size:1.4rem; margin:2.2rem 0 0.8rem; }
  .article-body h3 { font-size:1.15rem; }
  .pull-quote { font-size:1.05rem; padding:1.2rem 1.4rem; }
  .checklist > li { padding:1.2rem 1.3rem; }
  .checklist > li::before { right:-12px; width:28px; height:28px; font-size:0.85rem; }
  .final-cta { padding:2rem 1.5rem; }
  .breadcrumb { font-size:0.72rem; }
}