/* =========================================================
   TextForge Tools — shared stylesheet
   Palette: Crimson Shine
   ========================================================= */
:root{
  --red-950:#3d0000;
  --red-900:#5c0000;
  --red-800:#8b0000;
  --red-700:#b30f0f;
  --red-600:#d71920;
  --red-500:#ff2d2d;
  --red-400:#ff5c5c;
  --shine:#ffd7d7;
  --paper:#fff6f6;
  --ink:#210404;
  --ink-soft:#5a2a2a;
  --line:#f0c9c9;
  --white:#ffffff;
  --radius-s:10px;
  --radius-m:16px;
  --radius-l:28px;
  --shadow: 0 10px 30px rgba(139,0,0,.18);
  --font-head:'Baloo 2', 'Poppins', sans-serif;
  --font-body:'Inter', sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--font-head);margin:0 0 .5em;line-height:1.15;color:var(--red-900);}
p{margin:0 0 1em;}
.container{width:100%;max-width:1080px;margin:0 auto;padding:0 20px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

/* ---------- background wash ---------- */
.bg-wash{
  position:fixed;inset:0;z-index:-1;overflow:hidden;
  background:
    radial-gradient(60% 50% at 15% 0%, #ffe3e3 0%, transparent 60%),
    radial-gradient(50% 40% at 100% 20%, #ffd6d6 0%, transparent 55%),
    var(--paper);
}
.bg-wash span{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--red-500), var(--red-900));
  opacity:.10;filter:blur(6px);
  animation:drift 22s ease-in-out infinite;
}
.bg-wash span:nth-child(1){width:340px;height:340px;top:-80px;left:-100px;animation-delay:0s;}
.bg-wash span:nth-child(2){width:260px;height:260px;top:40%;right:-90px;animation-delay:5s;}
.bg-wash span:nth-child(3){width:200px;height:200px;bottom:-70px;left:20%;animation-delay:10s;}
@keyframes drift{
  0%,100%{transform:translateY(0) translateX(0);}
  50%{transform:translateY(-30px) translateX(20px);}
}

/* ---------- header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg, var(--red-800), var(--red-700));
  box-shadow:0 4px 18px rgba(139,0,0,.25);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;max-width:1080px;margin:0 auto;
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-head);font-weight:700;font-size:1.35rem;color:var(--white);
}
.brand .dot{
  width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--shine), var(--red-500) 60%, var(--red-900));
  box-shadow:0 0 12px rgba(255,90,90,.9);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.35);}
}
.nav-toggle{
  display:none;background:none;border:none;cursor:pointer;padding:6px;
}
.nav-toggle span{
  display:block;width:24px;height:2px;background:var(--white);margin:5px 0;border-radius:2px;
}
.nav-menu{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
}
.nav-menu a{
  color:#ffe8e8;font-weight:600;font-size:.94rem;padding:8px 4px;position:relative;
}
.nav-menu a::after{
  content:'';position:absolute;left:0;bottom:2px;width:0;height:2px;background:var(--shine);
  transition:width .25s ease;
}
.nav-menu a:hover::after,.nav-menu a.active::after{width:100%;}
.nav-menu a.active{color:var(--white);}
.dropdown{position:relative;}
.dropdown-panel{
  display:none;position:absolute;top:calc(100% + 14px);left:0;
  background:var(--white);border-radius:var(--radius-m);box-shadow:var(--shadow);
  padding:10px;min-width:240px;border:1px solid var(--line);
}
.dropdown.open .dropdown-panel{display:grid;gap:2px;}
.dropdown-panel a{
  color:var(--ink);padding:9px 12px;border-radius:var(--radius-s);font-size:.9rem;font-weight:600;
}
.dropdown-panel a:hover{background:var(--paper);color:var(--red-700);}
.dropdown-panel a::after{display:none;}
.dropdown > a::after{display:none;}
.dropdown > a::before{
  content:'▾';margin-left:5px;font-size:.7em;position:relative;top:-1px;
}

@media (max-width:860px){
  .nav-toggle{display:block;}
  .nav-menu{
    position:absolute;top:100%;left:0;right:0;background:var(--red-800);
    flex-direction:column;align-items:stretch;gap:0;max-height:0;overflow:hidden;
    transition:max-height .3s ease;
  }
  .nav-menu.show{max-height:600px;padding-bottom:10px;}
  .nav-menu a{padding:12px 22px;border-top:1px solid rgba(255,255,255,.08);}
  .dropdown-panel{position:static;box-shadow:none;border:none;background:rgba(0,0,0,.12);margin:0 16px;}
  .dropdown.open .dropdown-panel{display:flex;flex-direction:column;}
  .dropdown-panel a{color:#ffe8e8;}
  .dropdown-panel a:hover{background:rgba(255,255,255,.08);color:var(--white);}
}

/* ---------- hero ---------- */
.hero{padding:56px 0 20px;text-align:center;}
.eyebrow{
  display:inline-block;font-size:.8rem;font-weight:700;color:var(--red-700);
  background:var(--white);border:1px solid var(--line);padding:6px 14px;border-radius:99px;
  margin-bottom:16px;
}
.hero h1{
  font-size:clamp(1.8rem,4.5vw,2.9rem);
  background:linear-gradient(100deg, var(--red-900) 20%, var(--red-500) 45%, var(--shine) 52%, var(--red-600) 60%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shine 5s linear infinite;
}
@keyframes shine{
  0%{background-position:200% 0;}
  100%{background-position:-50% 0;}
}
.hero p.lead{max-width:640px;margin:0 auto;color:var(--ink-soft);font-size:1.05rem;}

/* ---------- tool card ---------- */
.tool-card{
  background:var(--white);border-radius:var(--radius-l);box-shadow:var(--shadow);
  padding:28px;margin:28px 0;border:1px solid var(--line);
  position:relative;overflow:hidden;
}
.tool-card::before{
  content:'';position:absolute;top:-2px;left:0;right:0;height:5px;
  background:linear-gradient(90deg, var(--red-900), var(--red-500), var(--shine), var(--red-600));
  background-size:220% 100%;animation:shine 6s linear infinite;
}
textarea.tool-input{
  width:100%;min-height:220px;resize:vertical;
  border:2px solid var(--line);border-radius:var(--radius-m);
  padding:16px;font-size:1rem;font-family:var(--font-body);color:var(--ink);
  transition:border-color .2s, box-shadow .2s;background:var(--paper);
}
textarea.tool-input:focus{
  outline:none;border-color:var(--red-500);box-shadow:0 0 0 4px rgba(255,45,45,.12);
}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}
.btn{
  border:none;cursor:pointer;font-family:var(--font-body);font-weight:700;font-size:.92rem;
  padding:11px 20px;border-radius:99px;color:var(--white);
  background:linear-gradient(135deg, var(--red-600), var(--red-800));
  box-shadow:0 6px 16px rgba(215,25,32,.35);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(215,25,32,.45);}
.btn:active{transform:translateY(0);}
.btn.ghost{
  background:var(--white);color:var(--red-700);border:2px solid var(--red-600);box-shadow:none;
}
.btn.ghost:hover{background:#fff0f0;}
:focus-visible{outline:3px solid var(--red-500);outline-offset:2px;}

.stats-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px;margin-top:20px;
}
.stat{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:16px 10px;text-align:center;transition:transform .15s ease;
}
.stat:hover{transform:translateY(-3px);}
.stat .num{
  font-family:var(--font-head);font-size:1.7rem;font-weight:700;color:var(--red-700);display:block;
}
.stat.bump .num{animation:bump .3s ease;}
@keyframes bump{0%{transform:scale(1);}40%{transform:scale(1.18);color:var(--red-500);}100%{transform:scale(1);}}
.stat .lbl{font-size:.78rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em;}

.result-box{
  margin-top:18px;background:var(--paper);border:1px dashed var(--red-400);
  border-radius:var(--radius-m);padding:16px;font-size:.98rem;
}

/* content sections */
.content-section{padding:20px 0 50px;}
.content-section h2{font-size:1.5rem;margin-top:1.3em;}
.content-section ul{padding-left:1.2em;}
.faq{border-top:1px solid var(--line);padding:16px 0;}
.faq summary{font-weight:700;cursor:pointer;color:var(--red-800);}
.faq[open] summary{color:var(--red-600);}

.list-list{list-style:none;padding:0;margin:0;display:grid;gap:10px;}
.list-list li{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-s);
  padding:10px 14px;display:flex;justify-content:space-between;gap:10px;align-items:center;
}
.list-list li button{
  border:none;background:var(--red-600);color:#fff;border-radius:8px;padding:4px 10px;cursor:pointer;font-weight:700;font-size:.8rem;
}

/* card grid for homepage tool links */
.grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:30px;}
.tool-link-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:22px;box-shadow:0 6px 18px rgba(139,0,0,.08);transition:transform .2s ease, box-shadow .2s ease;
}
.tool-link-card:hover{transform:translateY(-5px);box-shadow:0 14px 28px rgba(139,0,0,.18);}
.tool-link-card .ic{font-size:1.7rem;}
.tool-link-card h3{font-size:1.08rem;margin:10px 0 6px;color:var(--red-800);}
.tool-link-card p{font-size:.88rem;color:var(--ink-soft);margin:0;}

/* footer */
.site-footer{
  margin-top:60px;background:linear-gradient(180deg, var(--red-900), var(--red-950));
  color:#ffdada;padding:40px 0 20px;
}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px;}
.footer-grid h4{color:var(--white);font-family:var(--font-head);margin-bottom:10px;font-size:1rem;}
.footer-grid a{color:#ffcccc;font-size:.88rem;display:block;padding:4px 0;}
.footer-grid a:hover{color:var(--white);}
.footer-bottom{
  text-align:center;font-size:.8rem;color:#ffb3b3;margin-top:28px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.12);
}
@media (max-width:700px){.footer-grid{grid-template-columns:1fr 1fr;}}

.ad-slot{
  margin:26px 0;padding:14px;text-align:center;font-size:.75rem;color:var(--ink-soft);
  border:1px dashed var(--line);border-radius:var(--radius-s);background:#fffafa;
}