/*
Theme Name: AMR SALEM AI HUB
Theme URI: https://amrsalem.ai
Author: AMR SALEM
Author URI: https://amrsalem.ai
Description: ثيم ووردبريس احترافي فاخر بتصميم عربي RTL، مخصص لموقع AMR SALEM AI HUB المتخصص في الذكاء الاصطناعي، البرمجة، الأتمتة، وتطوير التطبيقات. يحتوي على صفحة رئيسية كاملة، نظام ألوان بني شوكولاتة وذهبي فاخر، تصميم متجاوب، ودعم كامل لـ Customizer.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: amr-salem
Tags: arabic, rtl, custom-colors, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, blog, one-page
*/

/* ===========================================
   CORE VARIABLES & RESET
   =========================================== */
:root{
    --brown-950:#0F0805;
    --brown-900:#1A0F08;
    --brown-800:#2B1810;
    --brown-700:#3E2723;
    --brown-600:#4E342E;
    --brown-500:#6D4C41;
    --brown-300:#A1887F;
    --brown-100:#EFEBE9;
    --gold-500:#D4AF37;
    --gold-400:#E5C158;
    --gold-300:#F2D785;
    --gold-200:#F8E5B0;
    --gold-100:#FDF6E0;
    --white:#FFFFFF;
    --off-white:#FAFAFA;
    --text:#1A0F08;
    --muted:#7B6B5E;
    --shadow-xl:0 30px 70px -20px rgba(0,0,0,0.6);
    --shadow-lg:0 20px 50px -15px rgba(0,0,0,0.45);
    --shadow-md:0 10px 30px -10px rgba(0,0,0,0.35);
    --shadow-sm:0 4px 12px -2px rgba(0,0,0,0.1);
    --radius-xl:32px;
    --radius-lg:20px;
    --radius-md:14px;
    --radius-sm:8px;
    --gradient-gold:linear-gradient(135deg,#F8E5B0 0%,#D4AF37 50%,#B8860B 100%);
    --gradient-brown:linear-gradient(135deg,#3E2723 0%,#1A0F08 100%);
    --gradient-dark:linear-gradient(135deg,#2B1810 0%,#1A0F08 50%,#0F0805 100%);
    --transition:all .3s cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{
    font-family:'Tajawal','Cairo','Segoe UI',system-ui,-apple-system,sans-serif;
    background:var(--off-white);
    color:var(--text);
    line-height:1.7;
    overflow-x:hidden;
    direction:rtl;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block;height:auto}
a{text-decoration:none;color:inherit;transition:var(--transition)}
a:hover{color:var(--gold-500)}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,textarea,select,button{font-family:inherit;font-size:inherit}
ul,ol{list-style:none;padding:0}

.container{max-width:1280px;margin:0 auto;padding:0 24px}
.section{padding:100px 0;position:relative}
.section-title{text-align:center;margin-bottom:64px;max-width:760px;margin-inline:auto;margin-block-end:64px}
.eyebrow{
    display:inline-block;
    font-size:13px;
    font-weight:700;
    color:var(--gold-500);
    background:var(--gold-100);
    padding:6px 16px;
    border-radius:50px;
    letter-spacing:0.5px;
    margin-bottom:16px;
}
.section-title h2{
    font-size:clamp(28px,4vw,44px);
    font-weight:800;
    color:var(--brown-800);
    line-height:1.2;
    margin-bottom:16px;
    letter-spacing:-0.5px;
}
.section-title p{
    color:var(--muted);
    font-size:17px;
    line-height:1.7;
}
.section.dark .section-title h2{color:var(--white)}
.section.dark .section-title p{color:rgba(255,255,255,0.7)}
.section.dark .eyebrow{background:rgba(212,175,55,0.15);color:var(--gold-300)}

/* ===========================================
   ACCESSIBILITY
   =========================================== */
.skip-link{
    position:absolute;
    top:-100px;
    right:0;
    background:var(--gold-500);
    color:var(--brown-900);
    padding:12px 24px;
    z-index:9999;
    font-weight:700;
    border-radius:0 0 0 8px;
    transition:top .2s;
}
.skip-link:focus{top:0;color:var(--brown-900)}
.screen-reader-text{
    position:absolute!important;
    clip:rect(1px,1px,1px,1px);
    width:1px;height:1px;
    overflow:hidden;
    word-wrap:normal!important;
}
:focus-visible{outline:3px solid var(--gold-500);outline-offset:3px;border-radius:4px}

/* ===========================================
   NAVBAR
   =========================================== */
.navbar{
    position:fixed;
    top:0;left:0;right:0;
    z-index:1000;
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border-bottom:1px solid rgba(0,0,0,0.06);
    transition:var(--transition);
}
.navbar.scrolled{box-shadow:var(--shadow-md);background:rgba(255,255,255,0.97)}
.nav-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:80px;
    gap:24px;
}
.logo{display:flex;align-items:center;gap:14px;flex-shrink:0}
.logo-img{
    width:52px;height:52px;
    border-radius:14px;
    object-fit:cover;
    box-shadow:0 6px 20px rgba(212,175,55,0.35);
    transition:var(--transition);
}
.logo:hover .logo-img{transform:scale(1.05) rotate(-3deg)}
.logo-text{display:flex;flex-direction:column;line-height:1.1}
.logo-text strong{font-size:18px;font-weight:800;color:var(--brown-800);letter-spacing:-0.3px}
.logo-text span{font-size:11px;color:var(--gold-500);font-weight:700;letter-spacing:1px}

.main-navigation{display:flex;gap:4px;align-items:center;margin:0}
.main-navigation li{position:relative}
.main-navigation a{
    display:block;
    padding:10px 18px;
    font-size:15px;
    font-weight:600;
    color:var(--brown-700);
    border-radius:10px;
    transition:var(--transition);
    position:relative;
}
.main-navigation a::after{
    content:'';
    position:absolute;
    bottom:4px;
    right:50%;
    width:0;height:2px;
    background:var(--gradient-gold);
    transition:all .3s;
    transform:translateX(50%);
}
.main-navigation a:hover,
.main-navigation .current-menu-item a,
.main-navigation a:focus{color:var(--brown-900)}
.main-navigation a:hover::after,
.main-navigation .current-menu-item a::after{width:24px}
.nav-cta{
    background:var(--gradient-gold)!important;
    color:var(--brown-900)!important;
    font-weight:800!important;
    box-shadow:0 6px 18px rgba(212,175,55,0.4);
    margin-right:8px;
}
.nav-cta::after{display:none!important}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(212,175,55,0.55);color:var(--brown-900)!important}
.menu-toggle{
    display:none;
    width:44px;height:44px;
    background:var(--brown-100);
    border-radius:10px;
    font-size:22px;
    color:var(--brown-800);
    align-items:center;justify-content:center;
}

/* ===========================================
   HERO
   =========================================== */
.hero{
    position:relative;
    background:var(--gradient-dark);
    color:var(--white);
    padding:160px 0 100px;
    overflow:hidden;
    min-height:100vh;
    display:flex;
    align-items:center;
}
.hero::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(212,175,55,0.20), transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(212,175,55,0.12), transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(110,60,30,0.4), transparent 60%);
    pointer-events:none;
}
.hero::after{
    content:'';
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(212,175,55,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212,175,55,0.05) 1px, transparent 1px);
    background-size:80px 80px;
    pointer-events:none;
    mask-image:radial-gradient(ellipse at center, black 30%, transparent 70%);
    -webkit-mask-image:radial-gradient(ellipse at center, black 30%, transparent 70%);
}
.hero-inner{
    position:relative;
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:80px;
    align-items:center;
    width:100%;
}
.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:rgba(212,175,55,0.12);
    border:1px solid rgba(212,175,55,0.3);
    color:var(--gold-300);
    padding:10px 20px;
    border-radius:50px;
    font-size:13px;
    font-weight:600;
    margin-bottom:28px;
    backdrop-filter:blur(10px);
}
.hero-badge .dot{
    width:8px;height:8px;border-radius:50%;
    background:var(--gold-400);
    box-shadow:0 0 0 4px rgba(212,175,55,0.3);
    animation:pulse 2s infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.9)}}
.hero h1{
    font-size:clamp(36px,6vw,68px);
    font-weight:900;
    line-height:1.05;
    margin-bottom:24px;
    letter-spacing:-1.5px;
    color:var(--white);
}
.hero h1 .gold{
    background:linear-gradient(135deg,#F8E5B0 0%,#D4AF37 50%,#B8860B 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
    display:inline-block;
}
.hero p.lead{
    font-size:clamp(16px,1.6vw,20px);
    color:rgba(255,255,255,0.78);
    max-width:580px;
    margin-bottom:40px;
    line-height:1.7;
}
.hero-ctas{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:56px;
}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:16px 32px;
    border-radius:14px;
    font-size:15px;
    font-weight:700;
    transition:var(--transition);
    border:none;
    cursor:pointer;
    white-space:nowrap;
    text-align:center;
}
.btn-primary{
    background:linear-gradient(135deg,#F8E5B0 0%,#D4AF37 50%,#B8860B 100%);
    color:var(--brown-900);
    box-shadow:0 10px 30px rgba(212,175,55,0.4);
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(212,175,55,0.6);color:var(--brown-900)}
.btn-ghost-light{
    background:rgba(255,255,255,0.08);
    color:var(--white);
    border:1px solid rgba(255,255,255,0.2);
    backdrop-filter:blur(10px);
}
.btn-ghost-light:hover{background:rgba(255,255,255,0.15);border-color:var(--gold-400);color:var(--white);transform:translateY(-3px)}
.btn-ghost-dark{
    background:var(--white);
    color:var(--brown-800);
    border:1px solid rgba(0,0,0,0.08);
}
.btn-ghost-dark:hover{background:var(--gold-100);border-color:var(--gold-400);color:var(--brown-900);transform:translateY(-3px)}
.btn-arrow{transition:transform .2s}
.btn:hover .btn-arrow{transform:translateX(-4px)}

/* Hero Topics (replaces fake stats) */
.hero-topics{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    max-width:600px;
}
.topic-chip{
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 16px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(212,175,55,0.15);
    border-radius:14px;
    backdrop-filter:blur(10px);
    transition:var(--transition);
}
.topic-chip:hover{background:rgba(212,175,55,0.1);border-color:var(--gold-400);transform:translateY(-3px)}
.topic-chip .ic{
    width:36px;height:36px;
    flex-shrink:0;
    border-radius:10px;
    background:linear-gradient(135deg,#F8E5B0 0%,#D4AF37 100%);
    color:var(--brown-900);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 12px rgba(212,175,55,0.3);
}
.topic-chip span{font-size:13px;font-weight:700;color:var(--white);line-height:1.3}

.hero-visual{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}
.hero-logo-wrap{
    position:relative;
    width:100%;
    max-width:500px;
    aspect-ratio:1;
}
.hero-logo{
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
    box-shadow:
        0 0 0 4px rgba(212,175,55,0.3),
        0 0 0 8px rgba(212,175,55,0.15),
        0 0 0 16px rgba(212,175,55,0.08),
        0 40px 80px rgba(0,0,0,0.5);
    animation:float 6s ease-in-out infinite;
    position:relative;
    z-index:2;
}
.hero-logo-ring{
    position:absolute;
    inset:-30px;
    border:2px dashed rgba(212,175,55,0.3);
    border-radius:50%;
    animation:rotate 30s linear infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
@keyframes rotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.floating-chip{
    position:absolute;
    background:rgba(255,255,255,0.95);
    color:var(--brown-800);
    padding:12px 18px;
    border-radius:14px;
    font-size:14px;
    font-weight:700;
    display:flex;align-items:center;gap:10px;
    box-shadow:var(--shadow-xl);
    animation:float 5s ease-in-out infinite;
    z-index:3;
    backdrop-filter:blur(10px);
}
.floating-chip .ico{
    width:32px;height:32px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#F8E5B0 0%,#D4AF37 100%);
    color:var(--brown-900);
    flex-shrink:0;
}
.chip-1{top:5%;right:-15%;animation-delay:0s}
.chip-2{bottom:10%;left:-12%;animation-delay:1.7s}
.chip-3{top:55%;right:-18%;animation-delay:3.4s}

/* ===========================================
   TOPICS BAR (Topics we cover)
   =========================================== */
.topics-bar{
    background:var(--white);
    border-bottom:1px solid rgba(0,0,0,0.05);
    padding:30px 0;
    position:relative;
    z-index:5;
}
.topics-inner{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
}
.topics-inner .label{
    color:var(--muted);
    font-size:14px;
    font-weight:700;
    margin-left:8px;
}
.topic-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    background:var(--brown-100);
    color:var(--brown-700);
    border-radius:50px;
    font-size:14px;
    font-weight:600;
    transition:var(--transition);
    border:1px solid transparent;
}
.topic-pill:hover{
    background:linear-gradient(135deg,#F8E5B0 0%,#D4AF37 100%);
    color:var(--brown-900);
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(212,175,55,0.3);
    border-color:transparent;
}

/* ===========================================
   SERVICES
   =========================================== */
.services{background:var(--brown-100)}
.services-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}
.service-card{
    background:var(--white);
    border-radius:var(--radius-lg);
    padding:40px 32px;
    transition:var(--transition);
    border:1px solid transparent;
    position:relative;
    overflow:hidden;
    height:100%;
    display:flex;
    flex-direction:column;
}
.service-card::before{
    content:'';
    position:absolute;
    top:0;right:0;left:0;
    height:4px;
    background:linear-gradient(90deg,var(--gold-300),var(--gold-500),var(--brown-700));
    transform:scaleX(0);
    transform-origin:right;
    transition:transform .4s;
}
.service-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-xl);border-color:var(--gold-200)}
.service-card:hover::before{transform:scaleX(1)}
.service-icon{
    width:72px;height:72px;
    border-radius:18px;
    background:linear-gradient(135deg,#F8E5B0 0%,#D4AF37 100%);
    color:var(--brown-900);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:24px;
    box-shadow:0 12px 28px rgba(212,175,55,0.35);
    transition:var(--transition);
}
.service-card:hover .service-icon{transform:scale(1.08) rotate(-5deg)}
.service-card h3{font-size:22px;font-weight:800;color:var(--brown-800);margin-bottom:14px;line-height:1.3}
.service-card p{color:var(--muted);font-size:15px;line-height:1.75;margin-bottom:20px;flex:1}
.service-card .more{
    color:var(--gold-500);
    font-weight:700;
    font-size:14px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    transition:gap .2s;
}
.service-card:hover .more{gap:12px}

/* ===========================================
   ABOUT
   =========================================== */
.about{background:var(--white)}
.about-inner{
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:80px;
    align-items:center;
}
.about-visual{position:relative}
.about-image{
    width:100%;
    aspect-ratio:1;
    border-radius:var(--radius-xl);
    background:linear-gradient(135deg,#2B1810 0%,#4E342E 50%,#1A0F08 100%);
    box-shadow:var(--shadow-xl);
    position:relative;
    overflow:hidden;
    display:flex;align-items:center;justify-content:center;
}
.about-image::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 30% 30%, rgba(212,175,55,0.4), transparent 60%),
        radial-gradient(circle at 70% 70%, rgba(110,60,30,0.5), transparent 60%);
}
.about-image img{
    position:relative;
    z-index:2;
    width:80%;height:80%;
    object-fit:contain;
    border-radius:50%;
    box-shadow:0 20px 50px rgba(0,0,0,0.4);
}
.about-floating{
    position:absolute;
    background:var(--white);
    padding:18px 22px;
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-xl);
    display:flex;align-items:center;gap:14px;
    z-index:3;
}
.about-floating .ic{
    width:48px;height:48px;
    border-radius:12px;
    background:linear-gradient(135deg,#F8E5B0 0%,#D4AF37 100%);
    color:var(--brown-900);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 20px rgba(212,175,55,0.3);
}
.about-floating strong{display:block;font-size:18px;font-weight:800;color:var(--brown-800);line-height:1.2}
.about-floating small{font-size:12px;color:var(--muted);font-weight:600}
.about-floating.af-1{top:20px;right:-30px}
.about-floating.af-2{bottom:30px;left:-30px}
.about-content h2{
    font-size:clamp(28px,4vw,42px);
    font-weight:800;
    color:var(--brown-800);
    line-height:1.2;
    margin-bottom:20px;
    letter-spacing:-0.5px;
}
.about-content h2 .gold{
    background:linear-gradient(135deg,#F8E5B0 0%,#D4AF37 50%,#B8860B 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
}
.about-content>p{font-size:17px;color:var(--muted);line-height:1.85;margin-bottom:24px}
.about-features{display:flex;flex-direction:column;gap:18px;margin:32px 0}
.about-feature{display:flex;gap:18px;align-items:flex-start}
.about-feature .check{
    width:36px;height:36px;
    flex-shrink:0;
    border-radius:10px;
    background:linear-gradient(135deg,#F8E5B0 0%,#D4AF37 100%);
    color:var(--brown-900);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 16px rgba(212,175,55,0.3);
}
.about-feature strong{display:block;color:var(--brown-800);font-weight:800;margin-bottom:4px;font-size:16px}
.about-feature p{margin:0;font-size:14px;color:var(--muted);line-height:1.6}

/* ===========================================
   WHY US
   =========================================== */
.whyus{
    background:var(--gradient-dark);
    color:var(--white);
    position:relative;
    overflow:hidden;
}
.whyus::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 10% 90%, rgba(212,175,55,0.15), transparent 50%),
        radial-gradient(circle at 90% 10%, rgba(212,175,55,0.10), transparent 50%);
    pointer-events:none;
}
.whyus-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    position:relative;
}
.why-card{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(212,175,55,0.15);
    border-radius:var(--radius-lg);
    padding:32px 26px;
    backdrop-filter:blur(10px);
    transition:var(--transition);
    text-align:right;
}
.why-card:hover{
    background:rgba(212,175,55,0.08);
    border-color:var(--gold-400);
    transform:translateY(-6px);
}
.why-icon{
    width:64px;height:64px;
    border-radius:16px;
    background:linear-gradient(135deg,#F8E5B0 0%,#D4AF37 100%);
    color:var(--brown-900);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:20px;
    box-shadow:0 10px 24px rgba(212,175,55,0.35);
}
.why-card h3{
    font-size:18px;
    font-weight:800;
    color:var(--white);
    margin-bottom:12px;
    line-height:1.3;
}
.why-card p{
    font-size:14px;
    color:rgba(255,255,255,0.7);
    line-height:1.7;
}

/* ===========================================
   ARTICLES
   =========================================== */
.articles{background:var(--off-white)}
.articles-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}
.article-card{
    background:var(--white);
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-md);
    transition:var(--transition);
    border:1px solid rgba(0,0,0,0.04);
    display:flex;
    flex-direction:column;
    height:100%;
}
.article-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-xl)}
.article-thumb{
    height:220px;
    position:relative;
    overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#2B1810 0%,#3E2723 50%,#1A0F08 100%);
}
.article-thumb::after{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 30% 30%, rgba(212,175,55,0.4), transparent 60%);
}
.article-thumb img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1;transition:transform .4s}
.article-card:hover .article-thumb img{transform:scale(1.06)}
.article-thumb-gradient{
    position:absolute;
    inset:0;
    z-index:1;
}
.article-tag{
    position:absolute;
    top:16px;right:16px;
    background:rgba(255,255,255,0.95);
    color:var(--brown-800);
    padding:6px 14px;
    border-radius:10px;
    font-size:12px;
    font-weight:700;
    z-index:2;
    backdrop-filter:blur(10px);
}
.article-body{padding:26px;flex:1;display:flex;flex-direction:column}
.article-meta{
    display:flex;
    gap:14px;
    font-size:13px;
    color:var(--muted);
    margin-bottom:12px;
    flex-wrap:wrap;
}
.article-meta span{display:flex;align-items:center;gap:5px}
.article-body h3{
    font-size:19px;
    font-weight:800;
    color:var(--brown-800);
    line-height:1.4;
    margin-bottom:12px;
}
.article-body h3 a{color:inherit}
.article-body h3 a:hover{color:var(--gold-500)}
.article-body p{color:var(--muted);font-size:14px;line-height:1.7;margin-bottom:18px;flex:1}
.article-link{
    color:var(--gold-500);
    font-weight:700;
    font-size:14px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    transition:gap .2s;
}
.article-link:hover{gap:12px}

/* ===========================================
   REVIEWS / TESTIMONIALS
   =========================================== */
.reviews{
    background:var(--brown-100);
    position:relative;
    overflow:hidden;
}
.reviews::before{
    content:'';
    position:absolute;
    top:-100px;right:-100px;
    width:400px;height:400px;
    background:radial-gradient(circle, rgba(212,175,55,0.15), transparent 70%);
    border-radius:50%;
    pointer-events:none;
}
.reviews-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
    position:relative;
}
.review-card{
    background:var(--white);
    border-radius:var(--radius-lg);
    padding:36px 32px;
    box-shadow:var(--shadow-md);
    transition:var(--transition);
    border:1px solid rgba(0,0,0,0.04);
    position:relative;
    height:100%;
    display:flex;
    flex-direction:column;
}
.review-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-xl)}
.review-quote{
    position:absolute;
    top:-20px;right:24px;
    width:48px;height:48px;
    background:linear-gradient(135deg,#F8E5B0 0%,#D4AF37 100%);
    color:var(--brown-900);
    border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 10px 24px rgba(212,175,55,0.4);
}
.review-stars{
    display:flex;
    gap:4px;
    margin-bottom:18px;
    color:var(--gold-500);
    font-size:18px;
}
.review-text{
    font-size:15px;
    line-height:1.85;
    color:var(--brown-700);
    margin-bottom:24px;
    flex:1;
    font-weight:500;
}
.review-author{
    display:flex;
    align-items:center;
    gap:14px;
    padding-top:20px;
    border-top:1px solid rgba(0,0,0,0.06);
}
.review-avatar{
    width:52px;height:52px;
    border-radius:50%;
    background:linear-gradient(135deg,#2B1810 0%,#D4AF37 100%);
    color:var(--white);
    display:flex;align-items:center;justify-content:center;
    font-weight:800;
    font-size:18px;
    flex-shrink:0;
    box-shadow:0 6px 16px rgba(0,0,0,0.15);
}
.review-info strong{display:block;color:var(--brown-800);font-weight:800;font-size:15px;margin-bottom:2px}
.review-info span{font-size:13px;color:var(--muted);font-weight:600}

/* ===========================================
   NEWSLETTER
   =========================================== */
.newsletter{background:var(--white)}
.newsletter-card{
    background:var(--gradient-dark);
    color:var(--white);
    border-radius:var(--radius-xl);
    padding:70px 50px;
    text-align:center;
    position:relative;
    overflow:hidden;
    box-shadow:var(--shadow-xl);
}
.newsletter-card::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 0% 0%, rgba(212,175,55,0.25), transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(212,175,55,0.18), transparent 50%);
}
.newsletter-card>*{position:relative;z-index:1}
.newsletter-card .eyebrow{background:rgba(212,175,55,0.18);color:var(--gold-300)}
.newsletter-card h2{
    font-size:clamp(28px,4vw,42px);
    font-weight:900;
    margin-bottom:16px;
    color:var(--white);
    line-height:1.2;
    letter-spacing:-0.5px;
}
.newsletter-card h2 .gold{
    background:linear-gradient(135deg,#F8E5B0 0%,#D4AF37 50%,#B8860B 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
}
.newsletter-card>p{
    font-size:17px;
    color:rgba(255,255,255,0.75);
    max-width:600px;
    margin:0 auto 36px;
    line-height:1.75;
}
.newsletter-form{
    display:flex;
    max-width:540px;
    margin:0 auto;
    background:var(--white);
    border-radius:16px;
    padding:8px;
    box-shadow:0 20px 50px rgba(0,0,0,0.4);
    gap:8px;
}
.newsletter-form input{
    flex:1;
    border:none;
    outline:none;
    padding:14px 20px;
    font-size:15px;
    font-family:inherit;
    background:transparent;
    color:var(--brown-800);
    min-width:0;
}
.newsletter-form button{
    background:linear-gradient(135deg,#F8E5B0 0%,#D4AF37 50%,#B8860B 100%);
    color:var(--brown-900);
    padding:14px 32px;
    border-radius:10px;
    font-weight:800;
    font-size:15px;
    transition:var(--transition);
    white-space:nowrap;
}
.newsletter-form button:hover{transform:scale(1.04);box-shadow:0 8px 20px rgba(212,175,55,0.5)}
.newsletter-form .msg{
    margin-top:16px;
    font-size:14px;
    color:var(--gold-300);
    font-weight:600;
    min-height:20px;
}
.newsletter-perks{
    display:flex;
    justify-content:center;
    gap:32px;
    margin-top:32px;
    flex-wrap:wrap;
}
.perk{
    display:flex;
    align-items:center;
    gap:10px;
    color:rgba(255,255,255,0.8);
    font-size:14px;
    font-weight:600;
}
.perk .check{
    width:24px;height:24px;border-radius:50%;
    background:linear-gradient(135deg,#F8E5B0 0%,#D4AF37 100%);
    color:var(--brown-900);
    display:flex;align-items:center;justify-content:center;
    font-size:13px;font-weight:900;
    flex-shrink:0;
}

/* ===========================================
   CONTACT
   =========================================== */
.contact{background:var(--brown-100)}
.contact-inner{
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:60px;
    align-items:flex-start;
}
.contact-info{
    background:var(--white);
    border-radius:var(--radius-xl);
    padding:40px;
    box-shadow:var(--shadow-md);
}
.contact-info h3{
    font-size:24px;
    font-weight:800;
    color:var(--brown-800);
    margin-bottom:8px;
}
.contact-info>p{color:var(--muted);font-size:15px;margin-bottom:30px;line-height:1.7}
.contact-list{display:flex;flex-direction:column;gap:20px;margin-bottom:32px}
.contact-item{
    display:flex;
    gap:18px;
    align-items:flex-start;
    padding:16px;
    border-radius:var(--radius-md);
    transition:var(--transition);
}
.contact-item:hover{background:var(--gold-100);transform:translateX(-4px)}
.contact-item .ci-icon{
    width:48px;height:48px;
    flex-shrink:0;
    border-radius:12px;
    background:linear-gradient(135deg,#F8E5B0 0%,#D4AF37 100%);
    color:var(--brown-900);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 20px rgba(212,175,55,0.3);
}
.contact-item strong{display:block;color:var(--brown-800);font-weight:800;font-size:15px;margin-bottom:4px}
.contact-item span,.contact-item a{color:var(--muted);font-size:14px;line-height:1.6}
.contact-item a:hover{color:var(--gold-500)}
.contact-social h4{color:var(--brown-800);font-weight:800;margin-bottom:16px;font-size:16px}
.social-list{display:flex;gap:12px;flex-wrap:wrap}
.social-list a{
    width:48px;height:48px;
    border-radius:12px;
    background:linear-gradient(135deg,#2B1810 0%,#4E342E 100%);
    color:var(--gold-300);
    display:flex;align-items:center;justify-content:center;
    transition:var(--transition);
    font-weight:800;
    font-size:14px;
}
.social-list a:hover{
    background:linear-gradient(135deg,#F8E5B0 0%,#D4AF37 100%);
    color:var(--brown-900);
    transform:translateY(-4px);
    box-shadow:0 10px 22px rgba(212,175,55,0.4);
}

.contact-form-wrap{
    background:var(--white);
    border-radius:var(--radius-xl);
    padding:40px;
    box-shadow:var(--shadow-md);
}
.contact-form-wrap h3{
    font-size:24px;
    font-weight:800;
    color:var(--brown-800);
    margin-bottom:8px;
}
.contact-form-wrap>p{color:var(--muted);font-size:15px;margin-bottom:28px;line-height:1.7}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.form-group{display:flex;flex-direction:column;margin-bottom:16px}
.form-group label{
    display:block;
    font-size:14px;
    font-weight:700;
    color:var(--brown-800);
    margin-bottom:8px;
}
.form-group label .req{color:#c0392b}
.form-group input,
.form-group textarea,
.form-group select{
    width:100%;
    padding:14px 18px;
    border:1.5px solid rgba(0,0,0,0.08);
    border-radius:12px;
    font-family:inherit;
    font-size:15px;
    background:var(--off-white);
    color:var(--brown-800);
    transition:var(--transition);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
    outline:none;
    border-color:var(--gold-500);
    background:var(--white);
    box-shadow:0 0 0 4px rgba(212,175,55,0.1);
}
.form-group textarea{min-height:140px;resize:vertical;font-family:inherit}
.form-submit{
    width:100%;
    padding:16px 32px;
    background:linear-gradient(135deg,#F8E5B0 0%,#D4AF37 50%,#B8860B 100%);
    color:var(--brown-900);
    border-radius:12px;
    font-weight:800;
    font-size:16px;
    cursor:pointer;
    transition:var(--transition);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}
.form-submit:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(212,175,55,0.5)}
.form-submit:disabled{opacity:0.6;cursor:not-allowed;transform:none}
.form-message{
    margin-top:16px;
    padding:14px 18px;
    border-radius:10px;
    font-size:14px;
    font-weight:600;
    display:none;
}
.form-message.success{display:block;background:#d4edda;color:#155724;border:1px solid #c3e6cb}
.form-message.error{display:block;background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}

/* ===========================================
   FOOTER
   =========================================== */
.footer{
    background:var(--brown-950);
    color:rgba(255,255,255,0.65);
    padding:80px 0 0;
    position:relative;
}
.footer::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,var(--gold-500),transparent);
}
.footer-grid{
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;
    gap:48px;
    padding-bottom:60px;
    border-bottom:1px solid rgba(212,175,55,0.12);
}
.footer-brand .logo{margin-bottom:20px}
.footer-brand .logo-text strong{color:var(--white)}
.footer-brand p{font-size:14px;line-height:1.85;margin-bottom:24px;color:rgba(255,255,255,0.6)}
.footer-social{display:flex;gap:10px;flex-wrap:wrap}
.footer-social a{
    width:42px;height:42px;
    border-radius:12px;
    background:rgba(212,175,55,0.08);
    color:var(--gold-300);
    display:flex;align-items:center;justify-content:center;
    transition:var(--transition);
    font-weight:800;
    font-size:13px;
    border:1px solid rgba(212,175,55,0.15);
}
.footer-social a:hover{
    background:linear-gradient(135deg,#F8E5B0 0%,#D4AF37 100%);
    color:var(--brown-900);
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(212,175,55,0.4);
    border-color:transparent;
}
.footer-col h5{
    color:var(--white);
    font-size:15px;
    font-weight:800;
    margin-bottom:24px;
    position:relative;
    padding-bottom:12px;
}
.footer-col h5::after{
    content:'';
    position:absolute;
    bottom:0;right:0;
    width:30px;height:2px;
    background:linear-gradient(90deg,var(--gold-300),var(--gold-500));
}
.footer-col li{margin-bottom:12px}
.footer-col a{
    font-size:14px;
    color:rgba(255,255,255,0.6);
    transition:var(--transition);
    display:inline-flex;
    align-items:center;
    gap:6px;
}
.footer-col a:hover{color:var(--gold-400);transform:translateX(-3px)}
.footer-col a::before{
    content:'←';
    opacity:0;
    transition:opacity .2s;
    color:var(--gold-500);
}
.footer-col a:hover::before{opacity:1}
.footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:28px 0;
    font-size:13px;
    color:rgba(255,255,255,0.5);
    flex-wrap:wrap;
    gap:14px;
}
.footer-bottom a:hover{color:var(--gold-400)}

/* ===========================================
   SINGLE POST / PAGE
   =========================================== */
.site-content{padding:120px 0 80px;min-height:60vh}
.page-header{text-align:center;margin-bottom:48px;max-width:760px;margin-inline:auto;margin-block-end:48px}
.page-header h1{font-size:clamp(30px,4.5vw,46px);font-weight:800;color:var(--brown-800);margin-bottom:14px;line-height:1.2;letter-spacing:-0.5px}
.page-header p{color:var(--muted);font-size:17px}
.entry-content{max-width:780px;margin:0 auto;font-size:17px;line-height:1.9;color:var(--text)}
.entry-content h2,.entry-content h3,.entry-content h4{color:var(--brown-800);font-weight:800;margin:32px 0 16px;line-height:1.3}
.entry-content h2{font-size:30px}
.entry-content h3{font-size:24px}
.entry-content h4{font-size:20px}
.entry-content p{margin-bottom:20px}
.entry-content ul,.entry-content ol{margin:20px 0;padding-right:30px;list-style:disc}
.entry-content ol{list-style:decimal}
.entry-content li{margin-bottom:10px}
.entry-content a{color:var(--gold-500);text-decoration:underline;text-underline-offset:3px}
.entry-content img{border-radius:var(--radius-md);margin:24px 0;box-shadow:var(--shadow-md);width:100%}
.entry-content blockquote{
    border-right:4px solid var(--gold-500);
    background:var(--gold-100);
    padding:20px 24px;
    margin:24px 0;
    border-radius:0 var(--radius-md) var(--radius-md) 0;
    font-style:italic;
    color:var(--brown-700);
}
.entry-content code{
    background:var(--brown-100);
    color:var(--brown-800);
    padding:2px 8px;
    border-radius:4px;
    font-family:'Courier New',monospace;
    font-size:0.9em;
}
.entry-content pre{
    background:var(--brown-800);
    color:var(--gold-200);
    padding:20px;
    border-radius:var(--radius-md);
    overflow-x:auto;
    margin:24px 0;
    direction:ltr;
    text-align:left;
}
.entry-meta{
    display:flex;
    justify-content:center;
    gap:20px;
    color:var(--muted);
    font-size:14px;
    margin-top:18px;
    flex-wrap:wrap;
}
.entry-meta span{display:flex;align-items:center;gap:5px}
.entry-thumbnail{margin-bottom:32px}
.entry-thumbnail img{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.posts-list{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px}

.pagination{display:flex;justify-content:center;gap:8px;margin-top:60px;flex-wrap:wrap}
.pagination a,.pagination span{
    padding:12px 20px;
    border-radius:10px;
    background:var(--white);
    color:var(--brown-700);
    font-weight:700;
    border:1px solid rgba(0,0,0,0.06);
    transition:var(--transition);
}
.pagination a:hover{background:linear-gradient(135deg,#F8E5B0 0%,#D4AF37 100%);color:var(--brown-900);border-color:transparent;transform:translateY(-2px)}
.pagination .current{background:linear-gradient(135deg,#F8E5B0 0%,#D4AF37 100%);color:var(--brown-900);border-color:transparent}

/* COMMENTS */
.comments-area{max-width:780px;margin:60px auto 0;padding-top:40px;border-top:1px solid rgba(0,0,0,0.08)}
.comments-title{font-size:24px;font-weight:800;color:var(--brown-800);margin-bottom:30px}
.comment-body{
    background:var(--white);
    padding:24px;
    border-radius:var(--radius-md);
    margin-bottom:16px;
    border:1px solid rgba(0,0,0,0.04);
}
.comment-author{font-weight:800;color:var(--brown-800)}
.comment-date{color:var(--muted);font-size:13px;margin-right:10px}
.comment-content{margin-top:12px;line-height:1.8}
.comment-form input[type=text],
.comment-form input[type=email],
.comment-form input[type=url],
.comment-form textarea{
    width:100%;
    padding:12px 16px;
    border:1px solid #ddd;
    border-radius:var(--radius-sm);
    margin-bottom:14px;
    font-family:inherit;
    font-size:15px;
    background:var(--white);
    transition:border .2s;
}
.comment-form input:focus,.comment-form textarea:focus{outline:none;border-color:var(--gold-500)}
.comment-form textarea{min-height:140px;resize:vertical}
.comment-form .submit{
    background:linear-gradient(135deg,#F8E5B0 0%,#D4AF37 100%);
    color:var(--brown-900);
    padding:12px 32px;
    border-radius:10px;
    font-weight:800;
    cursor:pointer;
    border:none;
    transition:var(--transition);
}
.comment-form .submit:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(212,175,55,0.4)}

/* 404 */
.error-404{text-align:center;padding:120px 20px}
.error-404 h1{font-size:clamp(80px,15vw,160px);font-weight:900;color:transparent;background:linear-gradient(135deg,#F8E5B0 0%,#D4AF37 50%,#B8860B 100%);-webkit-background-clip:text;background-clip:text;line-height:1}
.error-404 h2{font-size:clamp(24px,3vw,32px);color:var(--brown-800);margin:20px 0}
.error-404 p{color:var(--muted);margin-bottom:30px;max-width:480px;margin-inline:auto;margin-block-end:30px}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width:1100px){
    .main-navigation a{padding:10px 14px;font-size:14px}
    .whyus-grid{grid-template-columns:repeat(2,1fr)}
    .hero-topics{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1024px){
    .hero{padding:140px 0 80px;min-height:auto}
    .hero-inner{grid-template-columns:1fr;gap:60px;text-align:center}
    .hero p.lead{margin:0 auto 36px}
    .hero-ctas{justify-content:center}
    .hero-topics{margin:0 auto;max-width:600px}
    .about-inner{grid-template-columns:1fr;gap:60px}
    .about-floating.af-1{right:10px}
    .about-floating.af-2{left:10px}
    .contact-inner{grid-template-columns:1fr;gap:40px}
    .articles-grid,.reviews-grid,.services-grid{grid-template-columns:repeat(2,1fr)}
    .footer-grid{grid-template-columns:repeat(2,1fr)}
    .floating-chip{display:none}
}
@media (max-width:768px){
    .main-navigation{
        display:none;
        position:absolute;
        top:80px;right:0;left:0;
        background:var(--white);
        flex-direction:column;
        padding:20px;
        box-shadow:var(--shadow-lg);
        align-items:stretch;
        gap:4px;
    }
    .main-navigation.active{display:flex}
    .main-navigation a{
        display:block;
        text-align:right;
        padding:14px 18px;
        width:100%;
    }
    .main-navigation a::after{display:none}
    .nav-cta{text-align:center;margin:8px 0 0 0}
    .menu-toggle{display:flex}
    .section{padding:70px 0}
    .section-title{margin-bottom:40px}
    .hero h1{font-size:clamp(32px,8vw,48px)}
    .hero-ctas{flex-direction:column;align-items:stretch}
    .hero-ctas .btn{justify-content:center}
    .hero-topics{grid-template-columns:1fr}
    .articles-grid,.reviews-grid,.services-grid,.tutorials-grid,.tools-grid,.posts-list,.whyus-grid{
        grid-template-columns:1fr;
    }
    .newsletter-card{padding:50px 24px}
    .newsletter-form{flex-direction:column;padding:12px;gap:8px}
    .newsletter-form button{width:100%}
    .footer-grid{grid-template-columns:1fr;gap:40px}
    .footer-bottom{flex-direction:column;gap:14px;text-align:center}
    .form-row{grid-template-columns:1fr}
    .contact-info,.contact-form-wrap{padding:28px 24px}
    .about-floating{display:none}
    .container{padding:0 20px}
}
@media (max-width:480px){
    .nav-inner{height:70px;gap:12px}
    .logo-img{width:42px;height:42px}
    .logo-text strong{font-size:15px}
    .hero{padding:120px 0 60px}
    .floating-chip{display:none}
    .service-card,.article-body,.review-card{padding:24px 20px}
}

/* ===========================================================
   AMR SALEM — ADDITIONS (Marquee, Featured, Categories, Ads, Page Hero, Legal, Dropdown)
   =========================================================== */

/* ---- Page Hero (single pages) ---- */
.page-hero {
    padding: 140px 0 60px;
    background: linear-gradient(135deg, #1a0f08 0%, #2b1810 50%, #3e2723 100%);
    text-align: center;
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
}
.page-hero h1 {
    font-size: clamp(36px, 6vw, 56px);
    color: #fff;
    margin: 12px 0 16px;
    font-weight: 900;
    line-height: 1.15;
}
.page-hero p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 17px;
    max-width: 720px;
    margin: 0 auto;
}
.page-hero .eyebrow {
    display: inline-block;
    padding: 8px 18px;
    background: rgba(212, 175, 55, 0.12);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 100px;
    color: #D4AF37;
    font-size: 14px;
    font-weight: 700;
}

/* ---- Marquee ---- */
.marquee-section {
    background: linear-gradient(90deg, #1a0f08 0%, #2b1810 100%);
    padding: 18px 0;
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
    overflow: hidden;
}
.marquee-container {
    display: flex;
    align-items: center;
    gap: 18px;
}
.marquee-label {
    flex-shrink: 0;
    color: #D4AF37;
    font-size: 14px;
    padding-left: 4px;
    white-space: nowrap;
}
.marquee {
    flex: 1;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}
.marquee-track {
    display: inline-flex;
    gap: 40px;
    animation: marquee-scroll 40s linear infinite;
    white-space: nowrap;
    padding-right: 40px;
}
.marquee-track:hover {
    animation-play-state: paused;
}
.marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s;
}
.marquee-item:hover { color: #D4AF37; }
.marquee-item .mi-dot { color: #D4AF37; font-size: 8px; }
.marquee-item .mi-title { font-weight: 600; }
.marquee-item .mi-date {
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    padding-right: 8px;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}
@keyframes marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ---- Featured Post ---- */
.featured-post { padding: 70px 0; }
.featured-card {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 0;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: transform 0.3s, box-shadow 0.3s;
}
.featured-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 80px -20px rgba(212, 175, 55, 0.3);
}
.featured-thumb {
    position: relative;
    min-height: 380px;
    overflow: hidden;
    background: linear-gradient(135deg, #2B1810 0%, #3E2723 100%);
}
.featured-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.featured-gradient {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #D4AF37 0%, #2B1810 100%);
}
.featured-cat {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    color: #D4AF37;
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid rgba(212, 175, 55, 0.3);
}
.featured-body {
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.featured-meta {
    display: flex;
    gap: 20px;
    color: #666;
    font-size: 13px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.featured-title {
    font-size: clamp(24px, 3vw, 32px);
    color: #1A0F08;
    margin: 0 0 18px;
    line-height: 1.3;
    font-weight: 800;
}
.featured-title a { color: inherit; text-decoration: none; }
.featured-title a:hover { color: #B8860B; }
.featured-excerpt {
    color: #555;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 28px;
}
@media (max-width: 900px) {
    .featured-card { grid-template-columns: 1fr; }
    .featured-thumb { min-height: 240px; }
    .featured-body { padding: 32px 24px; }
}

/* ---- Blog Categories Grid ---- */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}
.cat-card {
    background: #fff;
    border-radius: 20px;
    padding: 28px 24px;
    text-align: center;
    text-decoration: none;
    color: #1A0F08;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.3s;
    display: block;
}
.cat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px -15px rgba(212, 175, 55, 0.4);
    border-color: rgba(212, 175, 55, 0.3);
}
.cat-icon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    margin: 0 auto 16px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.cat-card h3 {
    font-size: 18px;
    margin: 0 0 6px;
    font-weight: 800;
    color: #1A0F08;
}
.cat-card p {
    font-size: 13px;
    color: #888;
    margin: 0;
}

/* ---- CTA Contact (bottom card linking to /contact) ---- */
.cta-contact {
    padding: 50px 0 80px;
}
.cta-contact-card {
    background: linear-gradient(135deg, #1A0F08 0%, #3E2723 100%);
    border-radius: 24px;
    padding: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.cta-contact-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.2) 0%, transparent 70%);
}
.cta-contact-card > div { position: relative; z-index: 1; }
.cta-contact-card .eyebrow {
    color: #D4AF37;
    font-size: 14px;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 8px;
}
.cta-contact-card h2 {
    color: #fff;
    font-size: clamp(24px, 3vw, 32px);
    margin: 0 0 8px;
    font-weight: 800;
}
.cta-contact-card p {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    font-size: 16px;
}
.cta-contact-card .btn {
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, #D4AF37 0%, #B8860B 100%);
    color: #1A0F08;
    padding: 16px 32px;
    border-radius: 100px;
    text-decoration: none;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.cta-contact-card .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -8px rgba(212, 175, 55, 0.5);
}
@media (max-width: 600px) {
    .cta-contact-card { padding: 32px 24px; }
}

/* ---- Dropdown Nav Menu ---- */
.main-navigation .has-dropdown {
    position: relative;
}
.main-navigation .caret {
    font-size: 11px;
    margin-right: 4px;
    transition: transform 0.2s;
}
.main-navigation .has-dropdown:hover .caret { transform: rotate(180deg); }
.dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    background: #fff;
    border-radius: 16px;
    min-width: 240px;
    box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.25);
    list-style: none;
    margin: 0;
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.25s;
    z-index: 999;
    border: 1px solid rgba(0, 0, 0, 0.06);
}
.main-navigation .has-dropdown:hover > .dropdown-menu,
.main-navigation .has-dropdown:focus-within > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.dropdown-menu li { list-style: none; }
.dropdown-menu a {
    display: block;
    padding: 12px 16px;
    color: #1A0F08;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    transition: background 0.15s, color 0.15s;
}
.dropdown-menu a:hover {
    background: linear-gradient(135deg, #F8E5B0 0%, #D4AF37 100%);
    color: #1A0F08;
}
.dropdown-menu a::after { display: none !important; }

/* ---- Legal Pages (Privacy, Terms) ---- */
.legal-page {
    background: #fff;
    color: #2A1A0F;
    padding: 70px 0;
}
.container-narrow { max-width: 860px; }
.legal-content h2 {
    font-size: 26px;
    color: #1A0F08;
    margin: 36px 0 14px;
    font-weight: 800;
    border-right: 4px solid #D4AF37;
    padding-right: 14px;
}
.legal-content h3 {
    font-size: 19px;
    color: #3E2723;
    margin: 22px 0 10px;
    font-weight: 700;
}
.legal-content p {
    font-size: 16px;
    line-height: 1.85;
    color: #444;
    margin: 0 0 14px;
}
.legal-content p.lead {
    font-size: 18px;
    color: #1A0F08;
    padding: 20px 24px;
    background: #FFF8E7;
    border-radius: 14px;
    border-right: 4px solid #D4AF37;
    margin-bottom: 32px;
}
.legal-content ul {
    padding-right: 24px;
    margin: 0 0 18px;
}
.legal-content ul li {
    font-size: 15.5px;
    line-height: 1.85;
    color: #444;
    margin-bottom: 8px;
}
.legal-content a {
    color: #B8860B;
    text-decoration: none;
    border-bottom: 1px dashed #B8860B;
    font-weight: 600;
}
.legal-content a:hover { color: #1A0F08; border-bottom-color: #1A0F08; }

/* ---- Ad Slots ---- */
.amr-ad-slot {
    margin: 30px auto;
    padding: 14px;
    background: rgba(212, 175, 55, 0.05);
    border: 1px dashed rgba(212, 175, 55, 0.3);
    border-radius: 12px;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
}
.amr-ad-label {
    display: inline-block;
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

/* ---- Mobile adjustments for new elements ---- */
@media (max-width: 768px) {
    .marquee-container { gap: 10px; }
    .marquee-label { font-size: 12px; }
    .marquee-item { font-size: 13px; gap: 6px; }
    .marquee-item .mi-date { display: none; }
    .featured-card { grid-template-columns: 1fr; }
    .featured-thumb { min-height: 220px; }
    .featured-body { padding: 28px 22px; }
    .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .cat-card { padding: 22px 16px; }
    .cat-icon { width: 56px; height: 56px; font-size: 28px; }
    .cat-card h3 { font-size: 15px; }
    .page-hero { padding: 110px 0 50px; }
    .dropdown-menu { position: static; box-shadow: none; opacity: 1; visibility: visible; transform: none; background: rgba(0,0,0,0.04); margin-top: 6px; }
}