body{
margin:0;
font-family:Arial,Helvetica,sans-serif;
background:#f5f7fa;
   padding: 5px;
color:#333;
}

/* 🔒 Stop scroll when menu open */
body.menu-open{
overflow:hidden;
}

a{
text-decoration:none;
color:inherit;
}

button{
cursor:pointer;
font-family:inherit;
}

.container{
max-width:1100px;
margin:auto;
padding:16px;
}

.card{
background:#fff;
border-radius:16px;
box-shadow:0 10px 30px rgba(0,0,0,.15);
padding:20px;
}

/* =====================
   🔝 NAVBAR
===================== */
.site-nav{
position:sticky;
top:0;
background:#fff;
z-index:999;
box-shadow:0 4px 12px rgba(0,0,0,.08);
transition:transform .3s ease;
}

.site-nav.hide{
transform:translateY(-100%);
}

.nav-inner{
max-width:1100px;
margin:auto;
padding:12px 16px;
display:flex;
align-items:center;
justify-content:space-between;
}

.logo{
font-weight:700;
color:#ff4d6d;
font-size:18px;
}

/* NAV LINKS */
.nav-links{
display:flex;
gap:16px;
}

.nav-links a{
font-size:14px;
color:#333;
position:relative;
}

.nav-links a.active{
color:#ff4d6d;
font-weight:600;
}

/* =====================
   🍔 HAMBURGER
===================== */
.hamburger{
display:none;
flex-direction:column;
gap:5px;
background:none;
border:none;
cursor:pointer;
z-index:1001;
}

.hamburger span{
width:26px;
height:3px;
background:#333;
border-radius:2px;
transition:0.3s ease;
}

/* ❌ Hamburger → X */
.hamburger.active span:nth-child(1){
transform:rotate(45deg) translate(6px,6px);
}

.hamburger.active span:nth-child(2){
opacity:0;
}

.hamburger.active span:nth-child(3){
transform:rotate(-45deg) translate(6px,-6px);
}

/* =====================
   📱 MOBILE NAV
===================== */
@media(max-width:768px){
.hamburger{
display:flex;
}

.nav-links{
position:fixed;
top:0;
right:-260px;
width:240px;
height:100vh;
background:#fff;
flex-direction:column;
padding:80px 20px;
box-shadow:-10px 0 30px rgba(0,0,0,.25);
transition:right .3s ease;
z-index:1000;
}

.nav-links.open{
right:0;
}

.nav-links a{
padding:12px 0;
border-bottom:1px solid #eee;
}
}

/* =====================
   🔎 BREADCRUMB
===================== */
.breadcrumb{
max-width:1100px;
margin:8px auto;
padding:0 16px;
font-size:13px;
color:#666;
}

.breadcrumb a{
color:#ff4d6d;
}

.breadcrumb span{
margin:0 4px;
}

/* =====================
   🔻 FOOTER
===================== */
.site-footer{
margin-top:40px;
padding:20px;
text-align:center;
font-size:14px;
color:#666;
background:#fafafa;
}

.site-footer a{
color:#666;
margin:0 6px;
}

.site-footer a:hover{
color:#ff4d6d;
}
/* ✅ MOBILE SCROLL FIX */
html,body{
width:100%;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
}

/* when menu is open, stop background scroll */
body.menu-open{
overflow:hidden;
height:100vh;
}

/* allow main content to scroll */
main{
overflow-x:hidden;
}

/* fix fixed menu covering scroll */
@media(max-width:768px){
.nav-links{
overflow-y:auto;
-webkit-overflow-scrolling:touch;
}
}
/* =====================
   ABOUT TOOL CARD (CSS ONLY)
   ADSENSE SAFE
===================== */

.about-tool.container {
  /* Card look */
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 3rem 3rem;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0, 0, 0, 0.06);

  /* Spacing */
  margin: 90px auto;
  max-width: 1100px;

  /* Text readability (AdSense friendly) */
  line-height: 1.75;
}

/* Dark mode support */
.dark-mode .about-tool.container {
  background: var(--dark-card);
  border-color: var(--dark-border);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

/* Headings */
.about-tool.container h2 {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  margin-bottom: 1.5rem;
  color: var(--dark);
  text-align: center;
}

.dark-mode .about-tool.container h2 {
  color: var(--dark-text);
}

.about-tool.container h3 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: 1.25rem;
  color: var(--primary);
}

/* Paragraphs */
.about-tool.container p {
  font-size: 1rem;
  color: var(--muted);
  margin-bottom: 1.2rem;
}

.dark-mode .about-tool.container p {
  color: var(--dark-muted);
}

/* List styling */
.about-tool.container ul {
  margin-top: 1rem;
  padding-left: 1.2rem;
}

.about-tool.container li {
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  color: var(--muted);
  position: relative;
  padding-left: 1.2rem;
}

.about-tool.container li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: bold;
}

.dark-mode .about-tool.container li {
  color: var(--dark-muted);
}

/* Mobile optimization */
@media (max-width: 768px) {
  .about-tool.container {
    padding: 2rem 1.5rem;
    margin: 60px 16px;
  }
}