/* site.css - project styles (local) */
/* =======================================
   Global Theme Tokens
   ======================================= */
:root{
  --accent:#ff8c00;
  --muted:#6b7280;
  --muted-light:#4b5563;             /* text-muted on light */
  --muted-dark:rgba(255,255,255,.85); /* text-muted on dark */

  --card-bg:#fff;
  --card-shadow:0 12px 30px rgba(2,6,23,0.04);

  --gradient:linear-gradient(135deg,#6a11cb 0%,#2575fc 100%);

  /* dark surfaces */
  --card-bg-dark:#121416;
  --card-stroke-dark:rgba(255,255,255,.06);
}

/* =======================================
   Base
   ======================================= */
html,body{height:100%}
body{
  background:#f8f9fb;
  color:#111827;
  margin:0;
  -webkit-font-smoothing:antialiased;
}
body.dark{
  background:#0b0d10;
  color:#e6eef8;
}

/* =======================================
   Hero
   ======================================= */
.hero{
  text-align:center;
  padding:3rem 1rem;
  background:var(--gradient);
  color:#fff;
}
.hero h1{
  font-size:clamp(1.6rem,4vw,3rem);
  margin-bottom:.5rem;
  font-weight:700;
}
.hero p{opacity:.95;max-width:900px;margin:0 auto}

/* =======================================
   Tools Grid (5 columns desktop)
   ======================================= */
.tools-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1.6rem;
  max-width:1200px;
  margin:1.8rem auto;
  padding:0 1rem;
}
@media (max-width:1200px){.tools-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:900px){.tools-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:680px){.tools-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.tools-grid{grid-template-columns:repeat(1,1fr)}}

.tool-card{
  background:var(--card-bg);
  padding:1.6rem;
  border-radius:12px;
  text-align:center;
  box-shadow:var(--card-shadow);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.tool-card:hover{
  transform:translateY(-8px);
  box-shadow:0 26px 60px rgba(34,41,63,.12);
}

.tool-card .icon{
  font-size:28px;
  display:block;
  margin-bottom:.6rem;
}

/* colorful icon helpers */
.icon-compress{color:#2dd4bf}
.icon-merge{color:#fb923c}
.icon-split{color:#ef4444}
.icon-word{color:#2563eb}
.icon-excel{color:#16a34a}
.icon-protect{color:#8b5cf6}
.icon-unlock{color:#14b8a6}
.icon-translate{color:#f97316}
.icon-esign{color:#ef4444}
.icon-editor{color:#06b6d4}

/* =======================================
   Feature + FAQ cards (dark friendly)
   ======================================= */
.feature-card,
.faq-card{
  background:var(--card-bg);
  border-radius:12px;
  padding:1.1rem 1rem;
  box-shadow:var(--card-shadow);
}

/* readable subtext – override Bootstrap's .text-muted (!important) */
.feature-card .text-muted,
.faq-card .text-muted{
  color:var(--muted-light) !important;
  opacity:1 !important;
  line-height:1.55;
}
.feature-card p,
.faq-card p{color:inherit;opacity:1}

/* Dark surfaces + contrast */
body.dark .tool-card,
body.dark .feature-card,
body.dark .faq-card{
  background:var(--card-bg-dark);
  border:1px solid var(--card-stroke-dark);
  box-shadow:0 14px 34px rgba(0,0,0,.55);
  color:#e6eef8;
}
body.dark .feature-card .text-muted,
body.dark .faq-card .text-muted{
  color:var(--muted-dark) !important;
  opacity:1 !important;
}
body.dark .feature-card h4,
body.dark .faq-card h5{color:#fff}

/* Also make .text-muted sane globally */
.text-muted{color:var(--muted-light) !important}
body.dark .text-muted{color:var(--muted-dark) !important}

/* =======================================
   Footer
   ======================================= */
footer p{text-align:center;margin-top:1.2rem}

/* =======================================
   Tiles used on split page
   ======================================= */
.tile-card{
  border:1px solid rgba(0,0,0,0.06);
  background:var(--card-bg);
  padding:12px;
  border-radius:8px;
}
body.dark .tile-card{
  background:var(--card-bg-dark);
  border:1px solid var(--card-stroke-dark);
}
.tile-card.selected{
  border-color:var(--accent);
  background:linear-gradient(90deg,var(--accent),#3b82f6);
  color:#fff;
  box-shadow:0 18px 40px rgba(99,102,241,0.12);
}

/* =======================================
   Small responsive fixes
   ======================================= */
@media (max-width:768px){
  header nav{display:none}
  header .logo{margin-left:8px}
}