:root{
  --ink:#1A1F36;
  --ink-soft:#5B6478;
  --paper:#F7F8FA;
  --white:#FFFFFF;
  --primary:#3454D1;
  --primary-dark:#28409E;
  --primary-soft:#EAF0FE;
  --accent:#E63946;
  --accent-soft:#FDEAEC;
  --rule:#E2E5EC;
  --success:#1F9D6C;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--primary);color:var(--white);}
a{color:inherit;}
img{max-width:100%;}

.wrap{max-width:1120px;margin:0 auto;padding:0 28px;}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 28px;}

/* ---- HEADER ---- */
header{background:var(--white);border-bottom:1px solid var(--rule);padding:18px 0;position:sticky;top:0;z-index:40;}
header .wrap{display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.35rem;text-decoration:none;letter-spacing:-0.02em;}
.brand .mark{
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:var(--white);display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;font-size:0.85rem;box-shadow:0 4px 10px rgba(52,84,209,0.25);
}
nav{display:flex;gap:22px;font-size:0.92rem;font-weight:500;color:var(--ink-soft);}
nav a{text-decoration:none;}
nav a:hover{color:var(--primary);}

/* ---- GENERIC PAGE ---- */
.page-hero{padding:48px 0 8px;text-align:center;}
.page-hero .eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  font-size:0.78rem;font-weight:600;color:var(--primary);
  background:var(--primary-soft);padding:6px 14px;border-radius:999px;margin-bottom:16px;
}
.page-hero h1{font-weight:800;font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.15;letter-spacing:-0.02em;margin:0 0 14px;}
.page-hero p.sub{color:var(--ink-soft);font-size:1.05rem;max-width:56ch;margin:0 auto;}

.content{padding:20px 0 60px;font-size:1rem;color:var(--ink);}
.content h2{font-weight:800;font-size:1.4rem;margin:32px 0 12px;letter-spacing:-0.01em;}
.content h3{font-weight:700;font-size:1.1rem;margin:24px 0 10px;}
.content p{margin:0 0 14px;color:var(--ink-soft);}
.content ul,.content ol{color:var(--ink-soft);padding-left:22px;}
.content li{margin-bottom:6px;}
.content strong{color:var(--ink);}
.content a{color:var(--primary);text-decoration:underline;}

.card{background:var(--white);border:1px solid var(--rule);border-radius:14px;padding:24px;margin:20px 0;box-shadow:0 1px 3px rgba(26,31,54,0.04);}

.ad-slot{
  background:var(--white);border:1px dashed var(--rule);border-radius:12px;padding:16px;
  text-align:center;color:var(--ink-soft);font-size:0.72rem;text-transform:uppercase;
  letter-spacing:0.08em;margin:32px 0;
}

/* ---- FAQ ---- */
.faq-item{border-bottom:1px solid var(--rule);padding:16px 0;}
.faq-item summary{font-weight:600;cursor:pointer;font-size:1rem;list-style:none;display:flex;justify-content:space-between;align-items:center;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+';font-size:1.3rem;color:var(--primary);font-weight:400;}
.faq-item[open] summary::after{content:'\2212';}
.faq-item p{margin:10px 0 0;color:var(--ink-soft);font-size:0.95rem;}

/* ---- BLOG LIST ---- */
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:30px 0 60px;}
.blog-card{background:var(--white);border:1px solid var(--rule);border-radius:14px;padding:22px;text-decoration:none;display:block;transition:box-shadow 0.15s ease, transform 0.15s ease;}
.blog-card:hover{box-shadow:0 8px 20px rgba(26,31,54,0.08);transform:translateY(-2px);}
.blog-card .tag{font-size:0.7rem;color:var(--accent);text-transform:uppercase;letter-spacing:0.08em;font-weight:700;}
.blog-card h3{font-size:1.1rem;margin:8px 0 8px;color:var(--ink);font-weight:700;}
.blog-card p{font-size:0.88rem;color:var(--ink-soft);margin:0;}

/* ---- TOOL GRID (homepage) ---- */
.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:32px 0;}
.tool-card{
  background:var(--white);border:1px solid var(--rule);border-radius:16px;padding:22px;
  text-decoration:none;color:inherit;display:block;position:relative;
  transition:box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.tool-card:hover{box-shadow:0 10px 24px rgba(26,31,54,0.09);transform:translateY(-3px);border-color:var(--primary);}
.tool-card .tool-icon{
  width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:0.7rem;color:var(--white);margin-bottom:14px;
}
.tool-card h3{margin:0 0 6px;font-size:1.02rem;font-weight:700;}
.tool-card p{margin:0;font-size:0.85rem;color:var(--ink-soft);}
.tool-card .badge{position:absolute;top:16px;right:16px;font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;background:var(--primary-soft);color:var(--primary);padding:3px 9px;border-radius:999px;}

/* ---- FOOTER ---- */
footer{background:var(--ink);color:#B8BFD1;padding:36px 0;font-size:0.85rem;margin-top:40px;}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
footer nav{gap:20px;}
footer a{text-decoration:none;color:#B8BFD1;}
footer a:hover{color:var(--white);}

@media (max-width:900px){
  .tools-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:760px){
  nav{display:none;}
  .blog-grid{grid-template-columns:1fr;}
}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}