/*
 * Topworks Blog Design System
 * plasticmoulds.net
 * v2.0 — External Stylesheet
 *
 * Usage in every blog post:
 *   <link rel="stylesheet" href="/assets/css/topworks-blog.css" />
 *
 * Components included (all):
 *   Foundation · Hero · Intro · KPI Strip · Table + Badges
 *   Step List · Cause Cards · Checklist · Tip List
 *   Pros/Cons · Callout Box · FAQ Accordion · CTA · Footer
 */


/* ============================================================
   FOUNDATION — Reset + Variables + Base Typography
   ============================================================ */

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

:root{
  --bg:#f5f3ef; --surface:#edeae4; --card:#fff; --border:#dedad2;
  --accent:#c94f1a; --accent2:#e07a30;
  --accent-bg:rgba(201,79,26,.07); --accent-bd:rgba(201,79,26,.22);
  --text:#1a1713; --muted:#7a7268; --sub:#4a4640;
  --green:#2a7a4f; --green-bg:rgba(42,122,79,.08); --green-bd:rgba(42,122,79,.25);
  --red:#b83030; --red-bg:rgba(184,48,48,.07); --red-bd:rgba(184,48,48,.22);
  --amber:#a06010; --amber-bg:rgba(180,120,20,.08); --amber-bd:rgba(180,120,20,.28);
  --blue:#2460a7; --blue-bg:rgba(36,96,167,.07); --blue-bd:rgba(36,96,167,.22);
  --font-head:'Syne',sans-serif; --font-body:'DM Sans',sans-serif;
  --radius:14px; --max:820px;
  --sh-sm:0 1px 3px rgba(0,0,0,.06),0 4px 12px rgba(0,0,0,.05);
  --sh-md:0 2px 6px rgba(0,0,0,.07),0 8px 24px rgba(0,0,0,.06);
}

html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16.5px;line-height:1.78;-webkit-font-smoothing:antialiased}
.container{max-width:var(--max);margin:0 auto;padding:0 28px}

h1{font-family:var(--font-head);font-size:clamp(30px,5.5vw,50px);font-weight:800;line-height:1.1;letter-spacing:-.02em;margin-bottom:20px}
h1 em{font-style:normal;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
h2{font-family:var(--font-head);font-size:clamp(22px,3.5vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1.2;margin-bottom:13px}
h3{font-family:var(--font-head);font-size:18px;font-weight:700;margin-bottom:10px;color:var(--text)}

.section-label{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}

/* Scroll Reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .55s ease}
.reveal.visible{opacity:1;transform:none}


/* ============================================================
   COMPONENT 1 — HERO
   ============================================================ */

.hero{position:relative;padding:92px 0 64px;border-bottom:1px solid var(--border);overflow:hidden}
.hero::after{content:'';position:absolute;top:-100px;right:-180px;width:520px;height:520px;background:radial-gradient(circle,rgba(201,79,26,.11) 0%,transparent 70%);pointer-events:none}
.hero-tag{display:inline-flex;align-items:center;gap:8px;background:var(--accent-bg);border:1px solid var(--accent-bd);color:var(--accent2);font-size:11.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;padding:5px 14px;border-radius:100px;margin-bottom:24px}
.hero-tag span{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.hero-lead{font-size:17.5px;color:var(--sub);max-width:600px;line-height:1.72;margin-bottom:30px}
.hero-meta{display:flex;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.hero-meta span{display:flex;align-items:center;gap:6px}
.hero-img{width:100%;border-radius:var(--radius);overflow:hidden;margin:48px 0 0;position:relative;border:1px solid var(--border);box-shadow:var(--sh-md)}
.hero-img img{width:100%;display:block;object-fit:cover}
.hero-img figcaption{position:absolute;bottom:0;left:0;right:0;padding:40px 22px 16px;background:linear-gradient(to top,rgba(245,243,239,.95),transparent);font-size:12.5px;color:var(--muted)}


/* ============================================================
   COMPONENT 2 — INTRO SECTION
   ============================================================ */

.intro{padding:56px 0;border-bottom:1px solid var(--border)}
.intro p{color:var(--sub);margin-bottom:15px}
.intro p:last-of-type{margin-bottom:0}


/* ============================================================
   COMPONENT 3 — KPI STRIP
   ============================================================ */

.kpi-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin:40px 0 0;box-shadow:var(--sh-sm)}
.kpi{background:var(--card);padding:24px 18px;text-align:center}
.kpi-num{font-family:var(--font-head);font-size:32px;font-weight:800;color:var(--accent);line-height:1;margin-bottom:6px}
.kpi-label{font-size:12.5px;color:var(--muted);line-height:1.45}


/* ============================================================
   COMPONENT 4 — TABLE + BADGES
   ============================================================ */

.tbl-section{padding:60px 0;border-bottom:1px solid var(--border)}
.tbl-section .lead{color:var(--sub);margin-bottom:28px}
.table-wrap{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);box-shadow:var(--sh-sm);margin-bottom:8px;overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
.table-wrap thead tr{background:var(--text)}
.table-wrap.th-accent thead tr{background:var(--accent)}
.table-wrap.th-blue thead tr{background:var(--blue)}
thead th{font-family:var(--font-head);font-weight:700;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;padding:13px 16px;text-align:left;white-space:nowrap;color:#fff}
tbody tr{border-bottom:1px solid var(--border);transition:background .12s}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:var(--surface)}
tbody tr:nth-child(even){background:rgba(0,0,0,.018)}
td{padding:12px 16px;color:var(--sub);vertical-align:top;line-height:1.55}
td:first-child{font-weight:500;color:var(--text)}
.table-note{font-size:12px;color:var(--muted);padding:9px 16px;background:var(--surface);border-top:1px solid var(--border)}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:100px;white-space:nowrap;letter-spacing:.03em}
.badge-red{background:var(--red-bg);color:var(--red);border:1px solid var(--red-bd)}
.badge-green{background:var(--green-bg);color:var(--green);border:1px solid var(--green-bd)}
.badge-amber{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-bd)}
.badge-blue{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-bd)}


/* ============================================================
   COMPONENT 5 — STEP LIST
   ============================================================ */

.steps-section{padding:60px 0;border-bottom:1px solid var(--border)}
.steps-section .lead{color:var(--sub);margin-bottom:32px}
.steps-list{list-style:none;display:flex;flex-direction:column;gap:3px}
.steps-list li{display:grid;grid-template-columns:52px 1fr;background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:var(--sh-sm);transition:transform .18s,box-shadow .18s}
.steps-list li:hover{transform:translateX(5px);box-shadow:var(--sh-md)}
.step-num{display:flex;align-items:center;justify-content:center;background:var(--text);color:#fff;font-family:var(--font-head);font-size:13px;font-weight:800;flex-shrink:0;min-height:58px}
.step-body{padding:13px 18px}
.step-body strong{display:block;font-weight:600;font-size:14.5px;color:var(--text);margin-bottom:2px}
.step-body span{font-size:13.5px;color:var(--muted)}


/* ============================================================
   COMPONENT 6 — CAUSE CARDS
   ============================================================ */

.causes{padding:64px 0}
.causes-intro{color:var(--sub);margin-bottom:44px;max-width:580px}
.cause-card{display:grid;grid-template-columns:50px 1fr;gap:22px;padding:30px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:16px;box-shadow:var(--sh-sm);transition:border-color .2s,transform .2s,box-shadow .2s;overflow:hidden}
.cause-card:hover{border-color:var(--accent-bd);transform:translateY(-2px);box-shadow:var(--sh-md)}
.cause-num{font-family:var(--font-head);font-size:12px;font-weight:800;color:var(--accent);background:var(--accent-bg);border:1px solid var(--accent-bd);border-radius:9px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0;letter-spacing:.04em}
.cause-body{min-width:0;overflow:hidden}
.cause-body>p{color:var(--sub);font-size:15px;margin-bottom:13px}


/* ============================================================
   COMPONENT 7 — CHECKLIST
   ============================================================ */

.checklist{list-style:none;display:flex;flex-direction:column;gap:3px;margin:10px 0 16px}
.checklist li{display:flex;align-items:flex-start;gap:11px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px 14px;font-size:14px;color:var(--sub);transition:background .12s}
.checklist li:hover{background:#e6e2da}
.checklist li::before{content:'';width:18px;height:18px;flex-shrink:0;border-radius:50%;background:var(--accent-bg) url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l3 3 5-6' stroke='%23c94f1a' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;border:1.5px solid var(--accent-bd);margin-top:2px}


/* ============================================================
   COMPONENT 8 — TIP LIST
   ============================================================ */

.tip-list{list-style:none;display:flex;flex-direction:column;gap:3px;margin:10px 0 16px}
.tip-list li{display:flex;align-items:flex-start;gap:11px;padding:10px 14px;background:var(--blue-bg);border:1px solid var(--blue-bd);border-radius:8px;font-size:14px;color:var(--sub)}
.tip-list li::before{content:'→';color:var(--blue);font-weight:700;font-size:15px;flex-shrink:0}


/* ============================================================
   COMPONENT 9 — PROS / CONS
   ============================================================ */

.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 16px}
.pros-cons-col{border-radius:10px;overflow:hidden;border:1px solid var(--border)}
.pros-cons-head{padding:9px 15px;font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.pros-cons-head.pro{background:var(--green-bg);color:var(--green);border-bottom:1px solid var(--green-bd)}
.pros-cons-head.con{background:var(--red-bg);color:var(--red);border-bottom:1px solid var(--red-bd)}
.pros-cons-items{list-style:none}
.pros-cons-items li{padding:9px 15px;font-size:13.5px;color:var(--sub);border-bottom:1px solid var(--border);display:flex;gap:9px;align-items:flex-start}
.pros-cons-items li:last-child{border-bottom:none}
.pros-cons-items.pro li::before{content:'✓';color:var(--green);font-weight:700;flex-shrink:0}
.pros-cons-items.con li::before{content:'✗';color:var(--red);font-weight:700;flex-shrink:0}


/* ============================================================
   COMPONENT 10 — CALLOUT BOX
   ============================================================ */

.prevention{background:var(--accent-bg);border:1px solid var(--accent-bd);border-left:3px solid var(--accent);border-radius:0 10px 10px 0;padding:15px 18px;font-size:14.5px;color:var(--sub)}
.prevention strong{display:block;color:var(--accent);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:5px}


/* ============================================================
   COMPONENT 11 — FAQ ACCORDION
   ============================================================ */

.faq-section{padding:64px 0;border-bottom:1px solid var(--border)}
.faq-section .lead{color:var(--sub);margin-bottom:32px}
.faq-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:26px}
.faq-tab{padding:7px 16px;border-radius:100px;border:1.5px solid var(--border);background:var(--card);font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;transition:all .15s;font-family:var(--font-body)}
.faq-tab:hover{border-color:var(--accent-bd);color:var(--accent);background:var(--accent-bg)}
.faq-tab.active{border-color:var(--accent);background:var(--accent);color:#fff}
.faq-group{display:none;flex-direction:column;gap:4px}
.faq-group.active{display:flex}
.faq-item{background:var(--card);border:1.5px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:var(--sh-sm);transition:border-color .2s,box-shadow .2s}
.faq-item.open{border-color:var(--accent-bd);box-shadow:var(--sh-md)}
.faq-q{display:flex;align-items:center;gap:14px;padding:17px 20px;cursor:pointer;user-select:none}
.faq-icon{width:27px;height:27px;border-radius:50%;border:1.5px solid var(--accent-bd);background:var(--accent-bg);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s,border-color .2s}
.faq-item.open .faq-icon{background:var(--accent);border-color:var(--accent)}
.faq-icon svg{transition:transform .3s;stroke:var(--accent)}
.faq-item.open .faq-icon svg{transform:rotate(45deg);stroke:#fff}
.faq-q-text{font-family:var(--font-head);font-size:15px;font-weight:700;color:var(--text);flex:1;line-height:1.35}
.faq-a{display:none;padding:0 20px 18px 61px;font-size:14.5px;color:var(--sub);line-height:1.72}
.faq-item.open .faq-a{display:block}
.faq-a p{margin-bottom:9px}
.faq-a ul{list-style:none;margin:8px 0 10px;display:flex;flex-direction:column;gap:3px}
.faq-a ul li{padding:7px 12px;background:var(--surface);border-radius:7px;border:1px solid var(--border);font-size:13.5px}


/* ============================================================
   COMPONENT 12 — CTA SECTION
   ============================================================ */

.cta-section{padding:64px 0}
.cta-box{background:var(--text);border-radius:var(--radius);padding:52px 48px;text-align:center;color:#fff}
.cta-box h2{color:#fff;margin-bottom:14px}
.cta-box p{color:rgba(255,255,255,.72);margin-bottom:30px;font-size:16px}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#fff;font-family:var(--font-head);font-weight:700;font-size:15px;padding:14px 28px;border-radius:100px;text-decoration:none;transition:background .18s,transform .18s}
.btn:hover{background:var(--accent2);transform:translateY(-1px)}


/* ============================================================
   FOOTER
   ============================================================ */

.footer-note{padding:28px 0;border-top:1px solid var(--border);font-size:12.5px;color:var(--muted)}
.footer-note a{color:var(--muted);text-decoration:none}
.footer-note a:hover{color:var(--accent)}