/* styles.css — Codexal-themed. All comments in English. */
:root{
  /* Adjust these to match exact Codexal identity if needed */
  --bg:#ffffff;
  --text:#0b1220;
  --muted:#5b6575;
  --card:#f7f8fb;
  --brand:#0ea5e9;    /* primary (sky) */
  --brand2:#6366f1;   /* secondary (indigo) */
  --ok:#16a34a;
  --warn:#d97706;
  --bad:#dc2626;
  --border:#e2e8f0;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;color:var(--text);background:var(--bg)}
.container{max-width:1100px;margin:0 auto;padding:18px}

.header{border-bottom:1px solid var(--border);background:#fff}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;font-weight:800;letter-spacing:.2px}
.brand__img{height:28px}
.brand__name{display:none}
@media (min-width:640px){ .brand__name{display:inline} }

.menu a{color:var(--muted);margin-inline-start:12px;text-decoration:none;font-weight:600}
.menu a:hover{color:var(--text)}
.hero h1{margin:.5rem 0 0}
.hero .muted{margin:.25rem 0 1rem;color:var(--muted)}

.grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
@media (max-width:900px){.grid{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px}
.card h2{margin-top:0}
.mt{margin-top:18px}
.soft{border:0;border-top:1px solid var(--border);margin:16px 0}

.form label{display:block;margin-bottom:12px}
.form label span{display:block;font-weight:600;margin-bottom:6px}
.form input,.form textarea,.form select{
  width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--text)
}
.form textarea{resize:vertical}
.stats{display:block;margin-top:6px;color:var(--muted);font-size:.9rem}

.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.btn{
  padding:10px 14px;border-radius:10px;border:1px solid transparent;
  background:linear-gradient(90deg,var(--brand),var(--brand2));color:#fff;font-weight:700;cursor:pointer
}
.btn:hover{opacity:.95}
.btn.ghost{background:transparent;color:var(--brand);border-color:var(--brand)}
.btn.danger{--brand:var(--bad);--brand2:var(--bad);color:var(--bad);border-color:var(--bad)}

.serp{
  background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px;
  width:100%;max-width:680px
}
.serp-title{font-size:20px;line-height:1.3;color:#1a0dab;margin-bottom:6px;word-wrap:break-word}
.serp-url{color:#006621;font-size:14px;margin-bottom:6px;direction:ltr}
html[dir="rtl"] .serp-url{direction:ltr;text-align:left}
.serp-desc{color:#4d5156;font-size:14px}

progress{width:100%;height:12px;border:0;background:#e5e7eb;border-radius:999px;overflow:hidden}
progress::-webkit-progress-bar{background:#e5e7eb}
progress::-webkit-progress-value{background:linear-gradient(90deg,#22c55e,#3b82f6)}
progress::-moz-progress-bar{background:linear-gradient(90deg,#22c55e,#3b82f6)}

.details,.tips{margin:0;padding-left:18px}
.details li{margin:6px 0}
.tips li{margin:6px 0;color:var(--muted)}

.footer{border-top:1px solid var(--border);margin-top:24px;background:#fff}
.footer-wrap{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;align-items:center}
@media (max-width:900px){.footer-wrap{grid-template-columns:1fr}}
.footer-links{display:flex;gap:12px;flex-wrap:wrap}
.footer-links a{color:var(--muted);text-decoration:none}
.footer-links a:hover{color:var(--text)}
.footer-col.right{text-align:right}
@media (max-width:900px){.footer-col.right{text-align:left}}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.tiny{font-size:.8rem}

/* Pills for status */
.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.78rem;margin-inline-start:8px}
.pill.ok{background:#dcfce7;color:#166534}
.pill.warn{background:#fef3c7;color:#92400e}
.pill.bad{background:#fee2e2;color:#991b1b}

/* Speed test UI */
.speed{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.speed__input{flex:1;min-width:240px}
.speed-results{margin-top:10px}
.speed-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:600px){.speed-grid{grid-template-columns:1fr 1fr}}
.alert{padding:10px 12px;border-radius:10px}
.alert.danger{background:#fee2e2;color:#991b1b}

/* Header donate button spacing and sizing */
.menu .btn.donate{
  margin-inline-start: 12px;
  padding: 8px 14px;        /* a bit tighter than default */
  line-height: 1;
  border-radius: 10px;
  white-space: nowrap;
}
@media (max-width: 640px){
  .menu .btn.donate{ padding: 8px 12px; }
}

/* Footer brand link (Codexal) */
.codexal-link{
  text-decoration:none;
  font-weight:800;
  letter-spacing:.2px;
}
.codexal-link:hover{ text-decoration:underline; text-underline-offset:2px }

/* Brand letter colors (tweak to match your logo) */
:root{
  --codexal-c1:#0ea5e9; /* blue */
  --codexal-c2:#ef4444; /* red */
  --codexal-c3:#f59e0b; /* amber */
  --codexal-c4:#10b981; /* green */
  --codexal-c5:#3b82f6; /* blue-alt */
  --codexal-c6:#6366f1; /* indigo */
  --codexal-c7:#14b8a6; /* teal */
}
.c-c1{color:var(--codexal-c1)}
.c-c2{color:var(--codexal-c2)}
.c-c3{color:var(--codexal-c3)}
.c-c4{color:var(--codexal-c4)}
.c-c5{color:var(--codexal-c5)}
.c-c6{color:var(--codexal-c6)}
.c-c7{color:var(--codexal-c7)}

/* Footer polish */
.footer{border-top:1px solid var(--border);margin-top:24px;background:#fff;position:relative}
.footer::before{ /* subtle top fade */
  content:"";position:absolute;left:0;right:0;top:-10px;height:10px;
  background:linear-gradient(to bottom, rgba(0,0,0,.06), rgba(0,0,0,0));
}
.footer-wrap{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;align-items:center}
@media (max-width:900px){.footer-wrap{grid-template-columns:1fr}}
.footer-col.right{text-align:right}
@media (max-width:900px){.footer-col.right{text-align:left}}

.footer-brand{display:flex;align-items:center;gap:10px}
.brand-link{display:inline-flex;align-items:center}
.footer-links{display:flex;gap:12px;flex-wrap:wrap}
.footer-links a{color:var(--muted);text-decoration:none}
.footer-links a:hover{color:var(--text)}

/* Codexal colored letters */
.codexal-link{
  text-decoration:none;font-weight:800;letter-spacing:.2px;display:inline-block
}
.codexal-link:hover{text-decoration:underline;text-underline-offset:2px}

/* Match logo palette (tweak if needed) */
:root{
  --codexal-c1:#0ea5e9; /* blue */
  --codexal-c2:#ef4444; /* red */
  --codexal-c3:#f59e0b; /* amber */
  --codexal-c4:#10b981; /* green */
  --codexal-c5:#3b82f6; /* blue-alt */
  --codexal-c6:#6366f1; /* indigo */
  --codexal-c7:#14b8a6; /* teal */
}
.c-c1{color:var(--codexal-c1)}
.c-c2{color:var(--codexal-c2)}
.c-c3{color:var(--codexal-c3)}
.c-c4{color:var(--codexal-c4)}
.c-c5{color:var(--codexal-c5)}
.c-c6{color:var(--codexal-c6)}
.c-c7{color:var(--codexal-c7)}

/* Small typography helpers */
.small{font-size:.9rem}
.tiny{font-size:.8rem}


/* About page polish (all comments in English) */
.about .h1{margin-top:0;font-size:clamp(28px,3vw,36px)}
.lead{font-size:1.08rem;color:var(--muted);max-width:70ch}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.badge{background:#eef6ff;border:1px solid var(--border);padding:6px 10px;border-radius:999px;font-weight:700}

.card--soft{background:linear-gradient(180deg,#fff, #f9fbff)}
.breadcrumbs{font-size:.9rem;margin-bottom:8px;color:var(--muted)}
.breadcrumbs a{color:var(--muted);text-decoration:none}
.breadcrumbs a:hover{color:var(--text)}

.stats{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px}
.stat{background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px 12px;min-width:140px}
.stat__num{font-size:1.3rem;font-weight:800}
.stat__txt{font-size:.9rem;color:var(--muted)}

.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:920px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.grid-4{grid-template-columns:1fr}}
.features .feature{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px}
.features .icon{font-size:22px}

.steps{margin:0;padding:0 0 0 22px}
.steps li{margin:8px 0}

.tools{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:720px){.tools{grid-template-columns:1fr}}
.tool{display:flex;gap:12px;align-items:flex-start;text-decoration:none;background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px}
.tool:hover{border-color:var(--brand)}
.tool__emoji{font-size:22px}
.tool__t{font-weight:800}
.tool__d{font-size:.95rem}

.cta{margin:18px 0}
.cta__inner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px;border:1px solid var(--border);border-radius:16px;
  background:linear-gradient(90deg,var(--brand),var(--brand2));color:#fff
}
.cta .btn{background:#fff;color:var(--text);border-color:#fff}

.faq details{background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px;margin:8px 0}
.faq summary{cursor:pointer;font-weight:700}

/* Privacy page polish */
.policy .card--soft{background:linear-gradient(180deg,#fff,#f9fbff)}
.policy h2{margin:0 0 6px}
.policy .callout{
  background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px;margin:12px 0
}
.policy .callout ul{margin:8px 0 0 18px;padding:0}
.policy .toc{
  margin:10px 0;padding:12px;border:1px dashed var(--border);border-radius:12px;background:#fff
}
.policy .toc__title{font-weight:800;margin-bottom:6px}
.policy .toc ol{margin:0;padding-left:18px}
.policy .toc a{text-decoration:none;color:var(--text)}
.policy .toc a:hover{color:var(--brand)}

.policy section .muted{color:var(--muted)}
.policy ul{margin:8px 0 0 18px}
.policy h3{margin-top:0}


/* ===== Responsive Header (mobile-first) ===== */
:root{ --header-h: 64px; }

.header{ position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--border); }
.header .container.nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:var(--header-h); }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.brand__img{ width:32px; height:32px; border-radius:8px; }
.brand__name{ font-weight:800; }

/* Desktop menu */
.menu{ display:flex; align-items:center; gap:16px; }
.menu a{ text-decoration:none; color:var(--text); }
.menu a:hover{ color:var(--brand); }

/* Donate pill in header */
.menu .btn.donate{
  margin-inline-start: 8px; padding: 8px 14px; line-height:1; border-radius:10px; white-space:nowrap;
  background: linear-gradient(90deg,#0ea5e9,#6366f1); color:#fff !important; border:1px solid transparent;
}
.menu .btn.donate:hover{ filter:brightness(1.05); }

/* Hamburger button */
.nav-toggle{ 
  display:none; /* shown on mobile via media query */
  width:44px; height:44px; border-radius:10px; border:1px solid var(--border); background:#fff;
  align-items:center; justify-content:center; gap:3px;
}
.nav-toggle .bar{ display:block; width:20px; height:2px; background:#0b1220; border-radius:2px; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

/* ===== Mobile layout ===== */
@media (max-width: 880px){
  .nav-toggle{ display:inline-flex; }
  .menu{
    position: fixed;
    inset-inline: 0;
    inset-block-start: calc(var(--header-h) - 1px);
    background:#fff;
    border-top:1px solid var(--border);
    box-shadow: 0 12px 24px rgba(0,0,0,.06);
    display: grid;
    gap: 10px;
    padding: 12px 16px;
    max-height: calc(100dvh - var(--header-h));
    overflow: auto;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform .18s ease, opacity .18s ease;
  }
  .menu.is-open{ transform: translateY(0); opacity:1; pointer-events:auto; }
  .menu a{ padding:10px 6px; display:block; }
  .menu .btn.donate{ width:100%; text-align:center; }
  .brand__name{ font-weight:800; font-size:1rem; }
  body.no-scroll{ overflow:hidden; }
}

/* RTL niceties (keeps behavior symmetric) */
html[dir="rtl"] .menu{ text-align:right; }

/* ===== Hero section (responsive, brand gradient) ===== */
:root{
  /* fallback brand colors if not defined elsewhere */
  --brand: #0ea5e9;
  --brand2: #6366f1;
  --text-on-brand: #ffffff;
}
.hero-landing{
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  color: var(--text-on-brand);
  padding: 28px 0 34px;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.hero-wrap{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 22px;
  align-items: center;
}
@media (max-width: 980px){
  .hero-wrap{ grid-template-columns: 1fr; text-align: center; }
}
.hero-text .h1{ margin: 0 0 6px; color: #fff; }
.hero-lead{ font-size: 1.08rem; opacity: .95; margin: 4px 0 10px; }
.hero-points{ list-style: none; padding: 0; margin: 10px 0 14px; display: grid; gap: 6px; }
.hero-points li{ font-size: .98rem; opacity: .98; }

.hero-cta{ display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width: 980px){ .hero-cta{ justify-content:center; } }

/* Buttons on gradient (inverted) */
.btn-invert{
  background:#fff; color:#0b1220; border:1px solid #fff;
}
.btn-ghost-invert{
  border-color: rgba(255,255,255,.75) !important;
  color:#fff !important; background: transparent;
}
.btn-ghost-invert:hover{ background: rgba(255,255,255,.12); }

/* SERP card preview inside hero */
.hero-media{ display:flex; justify-content:center; }
.serp--hero{
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  width: min(560px, 100%);
  box-shadow: 0 18px 44px rgba(0,0,0,.10);
}
.serp--hero .serp-title{ font-size: 1.04rem; margin-bottom: 6px; color:#1a0dab; }
.serp--hero .serp-url{ font-size: .9rem; color:#0b8a00; opacity:.92; margin-bottom: 6px; }
.serp--hero .serp-desc{ font-size: .95rem; color:#333; }

/* RTL niceties */
html[dir="rtl"] .hero-points{ direction: rtl; }
html[dir="rtl"] .hero-cta{ flex-direction: row-reverse; }