/* =====================================================
   GLOBAL COLOR SYSTEM
===================================================== */

:root {
--bg-light-1: #f5f6f8;
--bg-light-2: #eef0f3;
--bg-section: #ffffff;
--text-main: #111111;
--text-muted: #555555;
--border-light: #e5e7eb;
--shadow-soft: 0 8px 20px rgba(0,0,0,0.05);
--shadow-hover: 0 15px 35px rgba(0,0,0,0.12);
}

/* =====================================================
   GLOBAL HUB LAYOUT
===================================================== */

body {
background: var(--bg-light-1);
color: var(--text-main);
}

.hub-page {
    padding-top: 90px;
}

.hub-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 20px;
}

.hub-page section {
margin: 80px 0;
}

h1, h2, h3 {
color: var(--text-main);
}

/* =====================================================
   HERO SECTION
===================================================== */

.hub-hero {
background: linear-gradient(135deg, var(--bg-light-1), var(--bg-light-2));
color: var(--text-main);
padding: 100px 20px 80px;
text-align: center;
border-radius: 0 0 40px 40px;
border-bottom: 1px solid var(--border-light);
}

.hub-hero h1 {
font-size: 44px;
margin-bottom: 25px;
line-height: 1.2;
}

.hub-hero .hub-intro {
max-width: 800px;
margin: 0 auto 30px;
font-size: 18px;
line-height: 1.8;
color: var(--text-muted);
}

/* CTA Buttons */

.primary-btn {
background: #111;
color: #fff;
padding: 14px 28px;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
display: inline-block;
transition: 0.3s ease;
}

.primary-btn:hover {
background: #333;
}

.secondary-btn {
background: #ffffff;
color: #111;
padding: 14px 28px;
border-radius: 8px;
border: 1px solid var(--border-light);
font-weight: 600;
text-decoration: none;
transition: 0.3s ease;
}

.secondary-btn:hover {
background: #f3f3f3;
}

/* =====================================================
   TRUST STRIP
===================================================== */

.hub-trust-strip {
text-align:center;
padding:20px 10px;
font-weight:600;
color:#333;
font-size:15px;
border-bottom:1px solid var(--border-light);
}

/* =====================================================
   TABLE OF CONTENTS
===================================================== */

.hub-toc {
background: var(--bg-section);
padding: 25px;
border-radius: 16px;
margin: 50px 0;
box-shadow: var(--shadow-soft);
}

.hub-toc ul {
columns: 2;
padding-left: 18px;
}

.hub-toc a {
color: #111;
font-weight: 500;
text-decoration: none;
}

.hub-toc a:hover {
text-decoration: underline;
}

/* =====================================================
   FEATURED TOOL CARDS
===================================================== */

.hub-tools-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
gap: 30px;
margin-top: 30px;
}

.hub-tool-card {
background: var(--bg-section);
padding: 30px;
border-radius: 18px;
box-shadow: var(--shadow-soft);
transition: 0.3s ease;
color: var(--text-main);
}

.hub-tool-card p {
color: var(--text-muted);
}

.hub-tool-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-hover);
}

/* =====================================================
   COMPARISON TABLE
===================================================== */

.hub-table {
width: 100%;
border-collapse: collapse;
margin-top: 30px;
background: var(--bg-section);
border-radius: 12px;
overflow: hidden;
box-shadow: var(--shadow-soft);
}

.hub-table th {
background: #111;
color: #fff;
padding: 14px;
text-align: left;
}

.hub-table td {
padding: 14px;
border-bottom: 1px solid var(--border-light);
}

/* =====================================================
   BULLET LISTS
===================================================== */

.hub-bullet-list {
padding-left: 20px;
line-height: 1.9;
}

.hub-bullet-list li {
margin-bottom: 8px;
}

/* =====================================================
   PERFORMANCE BOXES
===================================================== */

.metric-box {
background: var(--bg-section);
padding: 25px;
border-radius: 16px;
box-shadow: var(--shadow-soft);
transition: 0.3s ease;
}

.metric-box:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-hover);
}

/* =====================================================
   FINAL CTA
===================================================== */

.hub-final-cta {
text-align: center;
margin: 90px 0;
}

/* =====================================================
   AUTHOR BOX
===================================================== */

.hub-author-box {
background: var(--bg-section);
padding: 35px;
border-radius: 20px;
box-shadow: var(--shadow-soft);
margin-top: 70px;
}

/* =====================================================
   STICKY BAR – FLOATING GLASS VERSION
===================================================== */

.sticky-convert-bar {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: auto;
max-width: 600px;
padding: 14px 28px;

background: rgba(17, 17, 17, 0.85); /* شفافية */
backdrop-filter: blur(8px);         /* تأثير زجاجي */
-webkit-backdrop-filter: blur(8px);

border-radius: 40px;
text-align: center;
z-index: 9990;

box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.sticky-convert-bar a {
color: #fff;
font-weight: 600;
font-size: 15px;
text-decoration: none;
display: inline-block;
}

.sticky-convert-bar a:hover {
opacity: 0.9;
}
/* =====================================================
   ALTERNATING SECTIONS
===================================================== */

.hub-page section:nth-child(even) {
background: var(--bg-section);
padding: 60px 30px;
border-radius: 24px;
box-shadow: var(--shadow-soft);
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 768px) {

.hub-hero h1 {
font-size: 30px;
}

.hub-hero {
padding: 70px 20px;
}

.hub-toc ul {
columns:1;
}

.hub-page section {
margin: 50px 0;
}

}