@import url('fonts.css');

/*
 Theme Name:   Zaki Dev
 Theme URI:    https://zaki.dev
 Author:       Zaki
 Author URI:   https://zaki.dev
 Description:  Elementor-friendly theme for Zaki Dev — enterprise systems & automation solutions.
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  zaki-dev
 Requires at least: 6.0
 Tested up to: 6.5
 Requires PHP: 7.4
*/

/* ─── Design Tokens (Light Only — no dark mode) ─────────── */
:root {
    --bg: #f0f4ff;
    --bg2: #e8eeff;

    --text: #0f172a;

    --muted: #475569;

    --card: rgba(255, 255, 255, 0.68);

    --stroke: rgba(148, 163, 184, 0.30);

    --primaryA: #2d5eea;

    --primaryB: #1d4ed8;

    --accent3: #2d5eea;

    --shadow: 0 24px 60px rgba(15, 23, 42, 0.14);

    --shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.09);

    --radius: 28px;

    --max: 1200px;

    --transition: .22s cubic-bezier(.4, 0, .2, 1);

}





*,

*::before,

*::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



html,

body {

    width: 100%;

    scroll-behavior: smooth;

}



body {

    font-family: "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif;

    background: var(--bg);

    color: var(--text);

    line-height: 1.75;

    overflow-x: hidden;

}



/* ─── Scroll Progress Bar ───────────────────────────────── */

#scroll-progress {

    position: fixed;

    top: 0;

    left: 0;

    height: 3px;

    width: 0%;

    background: linear-gradient(90deg, var(--primaryA), var(--accent3));

    z-index: 1000;

    transition: width .1s linear;

    border-radius: 0 999px 999px 0;

}



/* ─── Hero Shell ────────────────────────────────────────── */

.hero-shell {

    width: 100vw;

    position: relative;

    overflow: hidden;

    padding: 32px 0 80px;

    isolation: isolate;

    background: var(--bg);

}



/* Mesh blobs */

.blob {

    position: absolute;

    border-radius: 50%;

    filter: blur(40px);

    opacity: 0.45;

    z-index: -2;

    pointer-events: none;

    animation: blobDrift 12s ease-in-out infinite alternate;

}



.blob-1 {

    width: 600px;

    height: 600px;

    top: -200px;

    left: -200px;

    background: radial-gradient(circle at 30% 30%, #60a5fa, transparent 55%),

        radial-gradient(circle at 70% 70%, #a78bfa, transparent 55%);

    animation-delay: 0s;

}



.blob-2 {

    width: 560px;

    height: 560px;

    bottom: -240px;

    right: -200px;

    background: radial-gradient(circle at 35% 40%, #93c5fd, transparent 55%),

        radial-gradient(circle at 70% 70%, #4f46e5, transparent 58%);

    animation-delay: -6s;

}



.blob-3 {

    width: 300px;

    height: 300px;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    background: radial-gradient(circle, rgba(124, 58, 237, 0.18), transparent 65%);

    animation-delay: -3s;

}



@keyframes blobDrift {

    0% {

        transform: scale(1) translate(0, 0);

    }



    100% {

        transform: scale(1.12) translate(20px, -20px);

    }

}



/* Grid */

.grid-layer {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(to right, rgba(15, 23, 42, 0.04) 1px, transparent 1px),

        linear-gradient(to bottom, rgba(15, 23, 42, 0.04) 1px, transparent 1px);

    background-size: 44px 44px;

    opacity: 0.40;

    z-index: -1;

    pointer-events: none;

    mask-image: radial-gradient(ellipse at 40% 30%, black 0 40%, transparent 72%);

}



/* Particles canvas */

#particles {

    position: absolute;

    inset: 0;

    z-index: -1;

    pointer-events: none;

}



/* ─── Layout ────────────────────────────────────────────── */

.wrap {

    max-width: var(--max);

    margin: 0 auto;

    padding: 0 24px;

}



/* Top row */

.hero-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    margin-bottom: 32px;

}



.pill {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 10px 18px;

    border-radius: 999px;

    background: rgba(37, 99, 235, 0.10);

    color: #1d4ed8;

    font-weight: 800;

    font-size: 0.95rem;

    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12);

    border: 1px solid rgba(37, 99, 235, 0.20);

    backdrop-filter: blur(12px);

    white-space: nowrap;

    transition: box-shadow var(--transition), transform var(--transition);

}



.pill:hover {

    transform: translateY(-1px);

    box-shadow: 0 12px 32px rgba(37, 99, 235, 0.20);

}



.dot {

    width: 18px;

    height: 18px;

    border-radius: 50%;

    background: #ffffff;

    border: 2px solid #1d4ed8;

    position: relative;

    display: grid;

    place-items: center;

    flex: 0 0 auto;

}



.dot::after {

    content: "";

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #1d4ed8;

    animation: pulse-dot 2.2s ease-in-out infinite;

}



@keyframes pulse-dot {



    0%,

    100% {

        transform: scale(1);

        opacity: 1;

    }



    50% {

        transform: scale(1.45);

        opacity: 0.7;

    }

}



.brand {

    display: flex;

    align-items: center;

    gap: 10px;

    font-weight: 900;

    letter-spacing: 0.03em;

    white-space: nowrap;

    color: var(--text);

}



.mark {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    background: radial-gradient(circle at 35% 30%, #2d5eea, #1d4ed8);

    box-shadow: 0 8px 24px rgba(45, 94, 234, 0.35);

}



/* ─── Main Grid ─────────────────────────────────────────── */

.hero {

    display: grid;

    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);

    gap: 40px;

    align-items: center;

}



.left {

    max-width: 680px;

}



/* Rating */

.rating {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    color: var(--muted);

    font-size: 0.95rem;

    background: rgba(255, 255, 255, 0.80);

    border: 1px solid var(--stroke);

    border-radius: 999px;

    padding: 8px 14px;

    backdrop-filter: blur(12px);

    box-shadow: var(--shadow-sm);

}



.stars {

    display: inline-flex;

    gap: 2px;

    color: #f59e0b;

    font-size: 1.05rem;

    direction: ltr;

}



.rating strong {

    color: #0b1220;

    font-weight: 900;

}



/* Headline */

h1 {

    font-size: clamp(2.1rem, 3.2vw + 0.9rem, 3.4rem);

    line-height: 1.15;

    letter-spacing: -0.03em;

    margin-bottom: 16px;

    color: var(--text);

}



.accent {

    background: linear-gradient(135deg, #1d4ed8, #6d28d9, #7c3aed);

    background-size: 200% auto;

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

    animation: gradientShift 5s linear infinite;

}



@keyframes gradientShift {

    0% {

        background-position: 0% 50%;

    }



    50% {

        background-position: 100% 50%;

    }



    100% {

        background-position: 0% 50%;

    }

}



.cursor {

    display: inline-block;

    width: 3px;

    height: 0.9em;

    background: #4f46e5;

    border-radius: 2px;

    margin-right: 4px;

    vertical-align: middle;

    animation: blink 1s step-end infinite;

}



@keyframes blink {



    0%,

    100% {

        opacity: 1;

    }



    50% {

        opacity: 0;

    }

}



.sub {

    color: var(--muted);

    font-size: 1.07rem;

    max-width: 46rem;

    margin-bottom: 22px;

    line-height: 1.8;

}



/* CTA Row */

.cta-row {

    display: flex;

    align-items: center;

    gap: 14px;

    flex-wrap: wrap;

    margin-top: 12px;

}



.btn {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 14px 22px;

    border-radius: 999px;

    font-family: inherit;

    font-size: 1rem;

    font-weight: 800;

    text-decoration: none;

    border: 1px solid transparent;

    cursor: pointer;

    overflow: hidden;

    transition: transform var(--transition), box-shadow var(--transition);

    user-select: none;

}



.btn-primary {

    color: white;

    background: linear-gradient(135deg, var(--primaryA), var(--primaryB));

    box-shadow: 0 16px 40px rgba(37, 99, 235, 0.38);

}



.btn-primary:hover {

    transform: translateY(-2px);

    box-shadow: 0 22px 50px rgba(37, 99, 235, 0.50);

}



.btn-primary:active {

    transform: translateY(0);

}



.btn-secondary {

    color: #111827;

    background: rgba(255, 255, 255, 0.85);

    border-color: var(--stroke);

    backdrop-filter: blur(12px);

    box-shadow: var(--shadow-sm);

}



.btn-secondary:hover {

    transform: translateY(-2px);

    border-color: rgba(99, 102, 241, 0.45);

    box-shadow: 0 12px 32px rgba(99, 102, 241, 0.15);

}



.btn:focus-visible {

    outline: 3px solid rgba(37, 99, 235, 0.40);

    outline-offset: 3px;

}



/* Ripple */

.ripple {

    position: absolute;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.35);

    transform: scale(0);

    animation: ripple-anim .55s linear;

    pointer-events: none;

}



@keyframes ripple-anim {

    to {

        transform: scale(4);

        opacity: 0;

    }

}



.btn-arrow {

    font-size: 1.1rem;

    transition: transform var(--transition);

}



.btn-primary:hover .btn-arrow {

    transform: translateX(-4px);

}



/* Stats row */

.stats-row {

    display: flex;

    gap: 28px;

    margin-top: 28px;

    flex-wrap: wrap;

}



.stat {

    display: flex;

    flex-direction: column;

}



.stat-num {

    font-size: 1.75rem;

    font-weight: 900;

    letter-spacing: -0.04em;

    line-height: 1;

    background: linear-gradient(135deg, var(--primaryA), var(--accent3));

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}



.stat-lbl {

    font-size: 0.85rem;

    color: var(--muted);

    margin-top: 2px;

}



/* Trust chips */

.trust {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    margin-top: 18px;

    color: #334155;

    font-size: 0.93rem;

}



.chip {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 14px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.80);

    border: 1px solid var(--stroke);

    backdrop-filter: blur(12px);

    box-shadow: var(--shadow-sm);

    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);

    cursor: default;

}



.chip:hover {

    transform: translateY(-2px);

    border-color: rgba(99, 102, 241, 0.35);

    box-shadow: 0 10px 26px rgba(99, 102, 241, 0.12);

}



.chip b {

    font-weight: 900;

    color: #0b1220;

}



/* ─── Media Card ────────────────────────────────────────── */

.media {

    position: relative;

    border-radius: var(--radius);

    overflow: hidden;

    min-height: 400px;

    box-shadow: var(--shadow);

    background: rgba(255, 255, 255, 0.68);

    backdrop-filter: blur(14px);

}



/* Animated gradient border */

.media::before {

    content: "";

    position: absolute;

    inset: -2px;

    border-radius: calc(var(--radius) + 2px);

    background: conic-gradient(from var(--angle, 0deg),

            #2d5eea, #1d4ed8, #2d5eea, #60a5fa, #2d5eea);

    z-index: -1;

    animation: borderSpin 5s linear infinite;

}



@property --angle {

    syntax: '<angle>';

    initial-value: 0deg;

    inherits: false;

}



@keyframes borderSpin {

    to {

        --angle: 360deg;

    }

}



.photo {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(to bottom right, rgba(2, 6, 23, 0.50), rgba(2, 6, 23, 0.12)),

        url("https://images.pexels.com/photos/3845129/pexels-photo-3845129.jpeg?auto=compress&cs=tinysrgb&w=1600");

    background-size: cover;

    background-position: center;

    transform: scale(1.03);

    transition: transform 8s ease;

}



.media:hover .photo {

    transform: scale(1.07);

}



/* Badge */

.badge {

    position: absolute;

    top: -20px;

    left: -12px;

    width: 190px;

    height: 190px;

    border-radius: 50%;

    background: radial-gradient(circle at 30% 30%, #60a5fa, #2d5eea 55%, #1d4ed8 100%);

    color: #fff;

    display: grid;

    place-items: center;

    padding: 16px;

    z-index: 2;

    box-shadow: 0 24px 56px rgba(45, 94, 234, 0.55);

    border: 1px solid rgba(255, 255, 255, 0.22);

}



.badge::before,

.badge::after {

    content: "";

    position: absolute;

    inset: -10px;

    border-radius: 50%;

    border: 2px solid rgba(37, 99, 235, 0.40);

    animation: pulsering 2.8s ease-out infinite;

}



.badge::after {

    inset: -22px;

    animation-delay: 1.4s;

    border-color: rgba(37, 99, 235, 0.20);

}



@keyframes pulsering {

    0% {

        transform: scale(0.92);

        opacity: 0.8;

    }



    100% {

        transform: scale(1.18);

        opacity: 0;

    }

}



.badge-inner {

    text-align: center;

    transform: translateY(-2px);

    direction: ltr;

    position: relative;

    z-index: 1;

}



.badge .num {

    font-size: 2.4rem;

    font-weight: 900;

    letter-spacing: -0.06em;

    line-height: 1;

}



.badge .lbl {

    margin-top: 6px;

    font-size: 0.88rem;

    opacity: 0.95;

    line-height: 1.3;

}



/* Seal */

.seal {

    position: absolute;

    left: 16px;

    bottom: 14px;

    width: 112px;

    height: 112px;

    border-radius: 50%;

    background: rgba(15, 23, 42, 0.60);

    border: 1px solid rgba(255, 255, 255, 0.25);

    backdrop-filter: blur(14px);

    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.45);

    display: grid;

    place-items: center;

    z-index: 2;

    transition: transform var(--transition);

}



.seal:hover {

    transform: scale(1.06) rotate(10deg);

}



.seal-inner {

    width: 90px;

    height: 90px;

    border-radius: 50%;

    border: 2px solid rgba(219, 234, 254, 0.80);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    color: #e0f2fe;

    text-transform: uppercase;

    letter-spacing: 0.12em;

    font-size: 0.61rem;

    text-align: center;

    gap: 3px;

    direction: ltr;

}



.seal .icon {

    font-size: 1.45rem;

    line-height: 1;

}



/* Mini card */

.mini-card {

    position: absolute;

    right: 16px;

    bottom: 14px;

    max-width: 290px;

    padding: 14px 14px;

    border-radius: 18px;

    background: rgba(255, 255, 255, 0.88);

    border: 1px solid rgba(148, 163, 184, 0.45);

    backdrop-filter: blur(14px);

    box-shadow: 0 16px 40px rgba(2, 6, 23, 0.20);

    z-index: 2;

    transition: transform var(--transition), box-shadow var(--transition);

}



.mini-card:hover {

    transform: translateY(-3px);

    box-shadow: 0 22px 50px rgba(2, 6, 23, 0.28);

}



.mini-card .kicker {

    font-weight: 900;

    font-size: 0.98rem;

    color: #0b1220;

    margin-bottom: 5px;

}



.mini-card .txt {

    font-size: 0.88rem;

    color: #334155;

    line-height: 1.55;

}



/* Floating feature tags */

.tag-float {

    position: absolute;

    top: 50%;

    right: -14px;

    transform: translateY(-50%);

    display: flex;

    flex-direction: column;

    gap: 8px;

    z-index: 3;

}



.ftag {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 7px 12px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.92);

    border: 1px solid rgba(148, 163, 184, 0.35);

    backdrop-filter: blur(12px);

    font-size: 0.80rem;

    font-weight: 700;

    color: #1e293b;

    white-space: nowrap;

    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.14);

    animation: floatTag 3.5s ease-in-out infinite alternate;

}



.ftag:nth-child(2) {

    animation-delay: -1.2s;

}



.ftag:nth-child(3) {

    animation-delay: -2.4s;

}



@keyframes floatTag {

    0% {

        transform: translateX(0);

    }



    100% {

        transform: translateX(-6px);

    }

}



/* ─── Reveal Animations ─────────────────────────────────── */

.reveal {

    opacity: 0;

    transform: translateY(18px);

    transition: opacity .6s cubic-bezier(.4, 0, .2, 1), transform .6s cubic-bezier(.4, 0, .2, 1);

}



.reveal.is-on {

    opacity: 1;

    transform: translateY(0);

}



@media (prefers-reduced-motion: reduce) {

    .reveal {

        transition: none;

        transform: none;

        opacity: 1;

    }



    .btn {

        transition: none;

    }



    .photo {

        transform: none;

    }



    .blob {

        animation: none;

    }



    .dot::after {

        animation: none;

    }



    .badge::before,

    .badge::after {

        animation: none;

    }



    .cursor {

        animation: none;

    }



    .accent {

        animation: none;

    }



    .ftag {

        animation: none;

    }

}



/* ─── Responsive — Hero ──────────────────────────────────── */

@media (max-width: 980px) {

    .hero {

        grid-template-columns: 1fr;

        gap: 26px;

    }



    .right {

        order: -1;

    }



    .media {

        min-height: 320px;

    }



    .badge {

        width: 162px;

        height: 162px;

        top: -14px;

        left: 8px;

    }



    .badge .num {

        font-size: 2.0rem;

    }



    .tag-float {

        display: none;

    }

}



@media (max-width: 640px) {

    .hero-top {

        flex-direction: column;

        align-items: flex-start;

    }



    .hero-shell {

        padding-top: 20px;

    }



    .media {

        border-radius: 22px;

    }



    .mini-card {

        max-width: 250px;

        font-size: 0.85rem;

    }



    .stats-row {

        gap: 18px;

    }



    .cta-row {

        gap: 10px;

    }



    .btn {

        padding: 13px 18px;

        font-size: 0.95rem;

    }

}





/* ═══════════════════════════════════════════════

   NAVBAR

═══════════════════════════════════════════════ */



/* ─── Navbar Base ───────────────────────────────────────── */

.navbar {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    z-index: 9000;

    padding: 0;

    transition: all .35s cubic-bezier(.4, 0, .2, 1);

}



/* Floating pill wrapper */

.nav-inner {

    max-width: 1200px;

    margin: 14px auto 0;

    padding: 0 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    height: 62px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.55);

    border: 1px solid rgba(148, 163, 184, 0.22);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);

    transition: all .35s cubic-bezier(.4, 0, .2, 1);

}



/* Scrolled state */

.navbar.scrolled .nav-inner {

    margin-top: 8px;

    background: rgba(255, 255, 255, 0.92);

    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);

    border-color: rgba(148, 163, 184, 0.30);

}



/* ─── Logo ──────────────────────────────────────────────── */

.nav-logo {

    display: flex;

    align-items: center;

    gap: 10px;

    text-decoration: none;

    flex-shrink: 0;

}



.nav-mark {

    width: 34px;

    height: 34px;

    border-radius: 50%;

    background: radial-gradient(circle at 35% 30%, #2d5eea, #1d4ed8);

    box-shadow: 0 6px 18px rgba(45, 94, 234, 0.35);

    position: relative;

    transition: transform .3s ease;

}



.nav-logo:hover .nav-mark {

    transform: rotate(20deg) scale(1.08);

}



/* Animated ring on mark */

.nav-mark::after {

    content: "";

    position: absolute;

    inset: -3px;

    border-radius: 50%;

    border: 2px solid rgba(37, 99, 235, 0.25);

    animation: navMarkRing 3s ease-in-out infinite;

}



@keyframes navMarkRing {



    0%,

    100% {

        transform: scale(1);

        opacity: 0.7;

    }



    50% {

        transform: scale(1.22);

        opacity: 0;

    }

}



.nav-name {

    font-size: 1.12rem;

    font-weight: 900;

    color: #0f172a;

    letter-spacing: 0.04em;

    line-height: 1;

}



.nav-name span {

    display: inline-block;

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: linear-gradient(135deg, #2d5eea, #1d4ed8);

    margin-right: 2px;

    margin-bottom: 6px;

    vertical-align: middle;

}



/* ─── Nav Links ─────────────────────────────────────────── */

.nav-links {

    display: flex;

    align-items: center;

    gap: 4px;

    list-style: none;

}



.nav-links a {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 8px 14px;

    border-radius: 999px;

    font-size: 0.90rem;

    font-weight: 700;

    color: #475569;

    text-decoration: none;

    position: relative;

    transition: color .2s ease, background .2s ease;

    white-space: nowrap;

}



.nav-links a:hover {

    color: #2d5eea;

    background: rgba(45, 94, 234, 0.07);

}



/* Dropdown parent */

.nav-item {

    position: relative;

}



.nav-links .has-drop>a::after {

    content: "▾";

    font-size: 0.7rem;

    opacity: 0.6;

    margin-right: 2px;

    transition: transform .2s ease;

    display: inline-block;

}



.nav-item.drop-open>a::after,

.nav-item:hover>a::after {

    transform: rotate(180deg);

}



/* Dropdown panel */

.nav-dropdown {

    position: absolute;

    top: calc(100% + 12px);

    right: 0;

    min-width: 230px;

    background: rgba(255, 255, 255, 0.96);

    border: 1px solid rgba(148, 163, 184, 0.28);

    border-radius: 18px;

    padding: 8px;

    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.14);

    backdrop-filter: blur(16px);

    opacity: 0;

    transform: translateY(10px) scale(0.97);

    pointer-events: none;

    transition: opacity .22s ease, transform .22s ease;

    z-index: 100;

}



.nav-item:hover .nav-dropdown,

.nav-item.drop-open .nav-dropdown {

    opacity: 1;

    transform: translateY(0) scale(1);

    pointer-events: auto;

}



.drop-item {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px 14px;

    border-radius: 12px;

    text-decoration: none;

    color: #334155;

    font-size: 0.88rem;

    font-weight: 700;

    transition: background .18s ease, color .18s ease;

}



.drop-item:hover {

    background: rgba(37, 99, 235, 0.07);

    color: #1d4ed8;

}



.drop-icon {

    width: 34px;

    height: 34px;

    border-radius: 9px;

    display: grid;

    place-items: center;

    font-size: 1rem;

    flex-shrink: 0;

}



.dico-blue {

    background: rgba(37, 99, 235, 0.10);

}



.dico-violet {

    background: rgba(124, 58, 237, 0.10);

}



.dico-sky {

    background: rgba(14, 165, 233, 0.10);

}



.dico-green {

    background: rgba(16, 185, 129, 0.10);

}



.drop-body {

    display: flex;

    flex-direction: column;

    gap: 1px;

}



.drop-title {

    font-weight: 800;

    font-size: 0.88rem;

    color: #0f172a;

}



.drop-sub {

    font-size: 0.76rem;

    color: #94a3b8;

    font-weight: 500;

}



/* Dropdown divider */

.drop-divider {

    height: 1px;

    background: rgba(148, 163, 184, 0.20);

    margin: 6px 8px;

}



/* ─── Right Actions ─────────────────────────────────────── */

.nav-actions {

    display: flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;

}



/* Language toggle */

.nav-lang {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 7px 13px;

    border-radius: 999px;

    border: 1px solid rgba(148, 163, 184, 0.28);

    background: transparent;

    font-family: inherit;

    font-size: 0.82rem;

    font-weight: 800;

    color: #475569;

    cursor: pointer;

    transition: all .2s ease;

}



.nav-lang:hover {

    border-color: rgba(45, 94, 234, 0.30);

    color: #2d5eea;

    background: rgba(45, 94, 234, 0.05);

}



/* CTA button */

.nav-cta {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 10px 20px;

    border-radius: 999px;

    font-family: inherit;

    font-size: 0.90rem;

    font-weight: 800;

    text-decoration: none;

    color: #ffffff;

    background: linear-gradient(135deg, #2d5eea, #1d4ed8);

    border: none;

    cursor: pointer;

    box-shadow: 0 8px 22px rgba(45, 94, 234, 0.32);

    transition: transform .2s ease, box-shadow .2s ease;

    white-space: nowrap;

}



.nav-cta:hover {

    transform: translateY(-2px);

    box-shadow: 0 14px 32px rgba(45, 94, 234, 0.44);

}



.nav-cta-arrow {

    font-size: 0.9rem;

    transition: transform .2s ease;

}



.nav-cta:hover .nav-cta-arrow {

    transform: translateX(-3px);

}



/* ─── Active section indicator dot ─────────────────────── */

.nav-links a .nav-dot {

    display: none;

}



/* ─── Mobile Hamburger ──────────────────────────────────── */

.nav-burger {

    display: none;

    flex-direction: column;

    gap: 5px;

    padding: 8px;

    cursor: pointer;

    background: transparent;

    border: none;

    border-radius: 10px;

    transition: background .2s ease;

}



.nav-burger:hover {

    background: rgba(45, 94, 234, 0.07);

}



.nav-burger span {

    display: block;

    width: 22px;

    height: 2.5px;

    border-radius: 99px;

    background: #334155;

    transition: transform .3s ease, opacity .3s ease, width .3s ease;

}



.nav-burger.open span:nth-child(1) {

    transform: translateY(7.5px) rotate(45deg);

}



.nav-burger.open span:nth-child(2) {

    opacity: 0;

    width: 0;

}



.nav-burger.open span:nth-child(3) {

    transform: translateY(-7.5px) rotate(-45deg);

}



/* ─── Mobile Drawer ─────────────────────────────────────── */

.nav-drawer {

    position: fixed;

    inset: 0;

    z-index: 8999;

    pointer-events: none;

}



.drawer-backdrop {

    position: absolute;

    inset: 0;

    background: rgba(5, 10, 25, 0.45);

    backdrop-filter: blur(4px);

    opacity: 0;

    transition: opacity .3s ease;

}



.drawer-panel {

    position: absolute;

    top: 0;

    right: 0;

    width: min(340px, 88vw);

    height: 100%;

    background: #ffffff;

    box-shadow: -20px 0 60px rgba(5, 10, 25, 0.18);

    padding: 28px 24px;

    transform: translateX(100%);

    transition: transform .35s cubic-bezier(.4, 0, .2, 1);

    overflow-y: auto;

    display: flex;

    flex-direction: column;

    gap: 0;

}



.nav-drawer.open {

    pointer-events: auto;

}



.nav-drawer.open .drawer-backdrop {

    opacity: 1;

}



.nav-drawer.open .drawer-panel {

    transform: translateX(0);

}



/* Drawer header */

.drawer-head {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 28px;

}



.drawer-close {

    width: 36px;

    height: 36px;

    border-radius: 50%;

    border: 1px solid rgba(148, 163, 184, 0.30);

    background: transparent;

    font-size: 1.1rem;

    color: #475569;

    cursor: pointer;

    display: grid;

    place-items: center;

    transition: background .2s ease;

}



.drawer-close:hover {

    background: rgba(244, 63, 94, 0.08);

    color: #f43f5e;

}



/* Drawer nav links */

.drawer-links {

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 2px;

    flex: 1;

}



.drawer-links a {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 13px 14px;

    border-radius: 14px;

    font-size: 1rem;

    font-weight: 700;

    color: #334155;

    text-decoration: none;

    transition: background .18s ease, color .18s ease;

}



.drawer-links a:hover {

    background: rgba(45, 94, 234, 0.07);

    color: #2d5eea;

}



.drawer-links a .d-icon {

    width: 36px;

    height: 36px;

    border-radius: 10px;

    display: grid;

    place-items: center;

    font-size: 1rem;

    flex-shrink: 0;

    background: rgba(45, 94, 234, 0.07);

}



.drawer-divider {

    height: 1px;

    background: rgba(148, 163, 184, 0.20);

    margin: 12px 0;

}



.drawer-cta {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 14px 20px;

    border-radius: 999px;

    font-family: inherit;

    font-size: 1rem;

    font-weight: 800;

    text-decoration: none;

    color: #ffffff;

    background: linear-gradient(135deg, #2d5eea, #1d4ed8);

    box-shadow: 0 10px 28px rgba(45, 94, 234, 0.32);

    margin-top: 16px;

}



/* Hide old pill row — navbar replaces it */

.hero-top {

    display: none !important;

}



/* Push hero down for fixed navbar */

.hero-shell {

    padding-top: 100px !important;

}



/* ─── Responsive — Navbar ──────────────────────────────── */

@media (max-width: 900px) {



    .nav-links,

    .nav-lang {

        display: none;

    }



    .nav-burger {

        display: flex;

    }



    .nav-inner {

        padding: 0 16px;

    }

}



@media (max-width: 480px) {

    .nav-inner {

        margin-top: 10px;

    }



    .nav-cta span:not(.nav-cta-arrow) {

        display: none;

    }



    .nav-cta {

        padding: 10px 14px;

    }

}



@media (prefers-reduced-motion: reduce) {



    .nav-inner,

    .navbar,

    .nav-mark,

    .nav-dropdown,

    .drawer-panel,

    .drawer-backdrop {

        transition: none;

    }



    .nav-mark::after {

        animation: none;

    }

}





/* ═══════════════════════════════════════════════

   FOOTER & CONTACT

═══════════════════════════════════════════════ */



/* ─── Footer ────────────────────────────────────────────── */

.site-footer {

    background: #0b1220;

    color: #e2e8f0;

    position: relative;

    overflow: hidden;

    z-index: 2;

}



/* Footer blobs */

.footer-blob {

    position: absolute;

    border-radius: 50%;

    filter: blur(70px);

    pointer-events: none;

    z-index: 0;

}



.footer-blob-1 {

    width: 420px;

    height: 420px;

    top: -100px;

    right: -100px;

    background: radial-gradient(circle, rgba(45, 94, 234, 0.18), transparent 65%);

}



.footer-blob-2 {

    width: 360px;

    height: 360px;

    bottom: -80px;

    left: -80px;

    background: radial-gradient(circle, rgba(45, 94, 234, 0.14), transparent 65%);

}



.footer-main {

    padding: 64px 0 48px;

    display: grid;

    grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));

    gap: 48px;

    position: relative;

    z-index: 1;

    border-bottom: 1px solid rgba(255, 255, 255, 0.07);

}



/* Brand column */

.footer-brand {}



.footer-logo {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 16px;

    text-decoration: none;

}



.footer-mark {

    width: 36px;

    height: 36px;

    border-radius: 50%;

    background: radial-gradient(circle at 35% 30%, #2d5eea, #1d4ed8);

    box-shadow: 0 8px 24px rgba(45, 94, 234, 0.40);

    flex-shrink: 0;

}



.footer-name {

    font-size: 1.2rem;

    font-weight: 900;

    color: #ffffff;

    letter-spacing: 0.04em;

}



.footer-tagline {

    font-size: 0.92rem;

    color: #94a3b8;

    line-height: 1.75;

    margin-bottom: 24px;

    max-width: 300px;

}



/* Footer newsletter */

.footer-nl {

    display: flex;

    gap: 0;

    border-radius: 12px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.10);

    background: rgba(255, 255, 255, 0.04);

    margin-bottom: 24px;

}



.footer-nl input {

    flex: 1;

    padding: 11px 14px;

    background: transparent;

    border: none;

    outline: none;

    font-family: inherit;

    font-size: 0.88rem;

    color: #e2e8f0;

    direction: rtl;

}



.footer-nl input::placeholder {

    color: #64748b;

}



.footer-nl button {

    padding: 11px 18px;

    background: linear-gradient(135deg, #2d5eea, #1d4ed8);

    border: none;

    color: #fff;

    font-family: inherit;

    font-size: 0.84rem;

    font-weight: 800;

    cursor: pointer;

    white-space: nowrap;

    transition: opacity .2s ease;

}



.footer-nl button:hover {

    opacity: 0.88;

}



/* Footer social icons */

.footer-socials {

    display: flex;

    gap: 8px;

}



.footer-social-icon {

    width: 36px;

    height: 36px;

    border-radius: 10px;

    border: 1px solid rgba(255, 255, 255, 0.10);

    background: rgba(255, 255, 255, 0.05);

    display: grid;

    place-items: center;

    font-size: 1rem;

    color: #94a3b8;

    text-decoration: none;

    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;

}



.footer-social-icon:hover {

    background: rgba(45, 94, 234, 0.18);

    border-color: rgba(45, 94, 234, 0.35);

    color: #60a5fa;

    transform: translateY(-2px);

}



/* Footer nav columns */

.footer-col {}



.footer-col-title {

    font-size: 0.82rem;

    font-weight: 800;

    color: #ffffff;

    letter-spacing: 0.10em;

    text-transform: uppercase;

    margin-bottom: 18px;

}



.footer-links {

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.footer-links a {

    font-size: 0.90rem;

    color: #94a3b8;

    text-decoration: none;

    transition: color .18s ease, padding-right .18s ease;

    display: inline-flex;

    align-items: center;

    gap: 6px;

}



.footer-links a:hover {

    color: #e2e8f0;

    padding-right: 4px;

}



.footer-links a .fl-dot {

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background: #2d5eea;

    opacity: 0;

    transition: opacity .18s ease;

    flex-shrink: 0;

}



.footer-links a:hover .fl-dot {

    opacity: 1;

}



/* Footer bottom bar */

.footer-bottom {

    padding: 22px 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    flex-wrap: wrap;

    position: relative;

    z-index: 1;

}



.footer-copy {

    font-size: 0.85rem;

    color: #64748b;

}



.footer-copy a {

    color: #60a5fa;

    text-decoration: none;

}



.footer-copy a:hover {

    text-decoration: underline;

}



/* Footer bottom bar nav (wp_nav_menu or fallback links) */

.footer-legal-nav {

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

    align-items: center;

}



.footer-legal-nav a,

.footer-legal-nav .menu-item a {

    font-size: 0.84rem;

    color: #64748b;

    text-decoration: none;

    transition: color .18s ease;

}



.footer-legal-nav a:hover,

.footer-legal-nav .menu-item a:hover {

    color: #94a3b8;

}



/* wp_nav_menu inside footer-legal-nav produces <ul> we need to flatten */

.footer-legal-nav ul {

    list-style: none;

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

    margin: 0;

    padding: 0;

}



/* Back to top button */

.back-top {

    position: fixed;

    bottom: 28px;

    left: 28px;

    width: 44px;

    height: 44px;

    border-radius: 50%;

    background: linear-gradient(135deg, #2d5eea, #1d4ed8);

    color: #ffffff;

    border: none;

    cursor: pointer;

    display: grid;

    place-items: center;

    font-size: 1.1rem;

    box-shadow: 0 8px 24px rgba(45, 94, 234, 0.40);

    z-index: 999;

    opacity: 0;

    transform: translateY(12px);

    transition: opacity .3s ease, transform .3s ease;

    pointer-events: none;

}



.back-top.visible {

    opacity: 1;

    transform: translateY(0);

    pointer-events: auto;

}



.back-top:hover {

    transform: translateY(-3px);

}



/* ─── Reveal — Contact ──────────────────────────────────── */

.ct-reveal {

    opacity: 0;

    transform: translateY(20px);

    transition: opacity .65s cubic-bezier(.4, 0, .2, 1),

        transform .65s cubic-bezier(.4, 0, .2, 1);

}



.ct-reveal.is-on {

    opacity: 1;

    transform: translateY(0);

}



@media (prefers-reduced-motion: reduce) {

    .ct-reveal {

        transition: none;

        transform: none;

        opacity: 1;

    }



    .back-top {

        transition: none;

    }



    .success-icon {

        animation: none;

    }

}



/* ─── Responsive — Footer ──────────────────────────────── */

@media (max-width: 1024px) {

    .footer-main {

        grid-template-columns: 1fr 1fr;

        gap: 36px;

    }



    .footer-brand {

        grid-column: span 2;

    }

}



@media (max-width: 640px) {

    .footer-main {

        grid-template-columns: 1fr;

    }



    .footer-brand {

        grid-column: span 1;

    }



    .footer-bottom {

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

    }



    .back-top {

        bottom: 18px;

        left: 18px;

    }

}





/* ═══════════════════════════════════════════════

   SINGLE POST TEMPLATE (Ahrefs-Inspired Layout)

   Follows Zaki-Dev Design Tokens & Branding

═══════════════════════════════════════════════ */



/* ─── Remove Top White Gap & Hide Admin Bar / Avatar ─── */

html,

body,

html body {

    margin-top: 0 !important;

    padding-top: 0 !important;

}



#wpadminbar,

#wpadminbar *,

#wp-admin-bar-my-account,

#wp-admin-bar-my-account *,

#wp-admin-bar-user-info,

.ab-avatar,

.avatar-user {

    display: none !important;

    visibility: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;

    width: 0 !important;

    height: 0 !important;

    overflow: hidden !important;

    position: absolute !important;

    top: -9999px !important;

    left: -9999px !important;

}





/* ─── Main Wrapper Compensation ─── */

.single-post-main {

    padding-top: 0 !important;

    margin-top: 0 !important;

}



/* ─── Hero Header (#2d5eea Style) ─── */

.single-hero-shell {

    position: relative;

    padding: 130px 0 70px;

    margin-top: 0 !important;

    background: #2d5eea; /* Target Blue/Purple Accent #2d5eea */

    color: #ffffff;

    text-align: center;

    border-bottom: 1px solid rgba(255, 255, 255, 0.12);

    overflow: hidden;

}









.single-hero-wrap {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    max-width: 960px;

    margin: 0 auto;

}



/* Breadcrumbs (Light Theme for Blue Hero) */

.single-breadcrumbs {

    margin-bottom: 24px;

}



.single-hero-shell .breadcrumb-list {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    list-style: none;

    font-size: 0.88rem;

    color: rgba(255, 255, 255, 0.75);

    flex-wrap: wrap;

}



.single-hero-shell .breadcrumb-item a {

    color: rgba(255, 255, 255, 0.85);

    text-decoration: none;

    font-weight: 600;

    transition: color var(--transition);

}



.single-hero-shell .breadcrumb-item a:hover {

    color: #ffffff;

    text-decoration: underline;

}



.single-hero-shell .breadcrumb-item.active {

    color: #ffffff;

    font-weight: 700;

}



.single-hero-shell .breadcrumb-separator {

    color: rgba(255, 255, 255, 0.50);

    font-size: 0.85rem;

}



/* Orange Stars Graphic */

.single-hero-stars {

    margin-bottom: 18px;

    display: flex;

    justify-content: center;

    align-items: center;

}



/* Uppercase Category Kicker */

.single-category-kicker {

    font-size: 0.88rem;

    font-weight: 900;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.92);

    margin-bottom: 20px;

}



.category-kicker-link {

    color: rgba(255, 255, 255, 0.95);

    text-decoration: none;

    transition: opacity var(--transition);

}



.category-kicker-link:hover {

    opacity: 0.85;

    text-decoration: underline;

}





/* Title & Lead */

.single-hero-shell .single-title {

    font-size: clamp(2.2rem, 3.8vw + 1rem, 3.8rem);

    line-height: 1.22;

    font-weight: 900;

    letter-spacing: -0.03em;

    color: #ffffff;

    margin-bottom: 20px;

    max-width: 900px;

    text-align: center;

}



.single-hero-shell .single-lead {

    font-size: 1.18rem;

    line-height: 1.8;

    color: rgba(255, 255, 255, 0.88);

    margin-bottom: 28px;

    max-width: 760px;

    font-weight: 500;

    text-align: center;

}



/* Author & Reviewer Line */

.single-author-line {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    flex-wrap: wrap;

    font-size: 0.96rem;

    color: rgba(255, 255, 255, 0.95);

    margin-bottom: 10px;

    font-weight: 600;

}



.single-author-line a.author-name-link {

    color: #ffffff;

    text-decoration: underline;

    text-underline-offset: 3px;

    font-weight: 700;

    transition: opacity var(--transition);

}



.single-author-line a.author-name-link:hover {

    opacity: 0.85;

}



.meta-pipe {

    opacity: 0.6;

    margin: 0 4px;

}



.reviewer-tag {

    color: rgba(255, 255, 255, 0.95);

    font-weight: 600;

}



/* Date & Read Time Line */

.single-date-read-line {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    font-size: 0.90rem;

    color: rgba(255, 255, 255, 0.82);

    font-weight: 500;

}



.meta-bullet {

    font-size: 0.70rem;

    opacity: 0.7;

}



/* Featured Media Placement under Hero */

.single-body-shell .single-featured-media {

    margin-bottom: 48px;

    margin-top: -36px;

    position: relative;

    z-index: 10;

    border-radius: var(--radius);

    overflow: hidden;

    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);

    background: #ffffff;

    border: 1px solid var(--stroke);

}



    background: #ffffff;

    border: 1px solid var(--stroke);

}



.featured-image-wrapper {

    width: 100%;

    max-height: 520px;

    overflow: hidden;

    display: block;

}



.featured-img {

    width: 100%;

    height: 100%;

    max-height: 520px;

    object-fit: cover;

    display: block;

    transition: transform 6s ease;

}



.single-featured-media:hover .featured-img {

    transform: scale(1.03);

}



.featured-caption {

    padding: 12px 20px;

    font-size: 0.85rem;

    color: var(--muted);

    background: rgba(248, 250, 252, 0.90);

    text-align: center;

    border-top: 1px solid var(--stroke);

}





/* ─── Main Content Shell ─── */

.single-body-shell {

    padding: 56px 0 80px;

    background: var(--bg);

}



.single-layout-grid {

    display: grid;

    grid-template-columns: minmax(0, 1fr) 330px;

    gap: 48px;

    align-items: start;

}



/* Article Container */

.single-article {

    min-width: 0;

    background: #ffffff;

    border-radius: var(--radius);

    padding: 44px 40px;

    border: 1px solid var(--stroke);

    box-shadow: var(--shadow-sm);

}



/* Mobile TOC */

.single-toc-mobile {

    margin-bottom: 32px;

    border-radius: 16px;

    background: rgba(37, 99, 235, 0.04);

    border: 1px solid rgba(37, 99, 235, 0.18);

    overflow: hidden;

}



.toc-summary {

    padding: 14px 18px;

    font-weight: 800;

    font-size: 0.95rem;

    color: #1d4ed8;

    cursor: pointer;

    display: flex;

    align-items: center;

    gap: 10px;

    user-select: none;

}



.toc-mobile-body {

    padding: 12px 20px 20px;

    border-top: 1px solid rgba(37, 99, 235, 0.10);

}



.toc-mobile-list {

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.toc-mobile-list a {

    text-decoration: none;

    color: var(--text);

    font-size: 0.90rem;

    font-weight: 600;

}



.toc-mobile-list .toc-h3 {

    padding-right: 16px;

    font-size: 0.85rem;

    opacity: 0.9;

}



/* ─── Article Typography (Rich Content) ─── */

.single-entry-content {

    font-size: 1.08rem;

    line-height: 1.88;

    color: #1e293b;

}



.single-entry-content p {

    margin-bottom: 24px;

}



.single-entry-content h2 {

    font-size: 1.75rem;

    font-weight: 900;

    line-height: 1.3;

    color: var(--text);

    margin-top: 48px;

    margin-bottom: 20px;

    padding-right: 14px;

    border-right: 4px solid var(--primaryA);

    letter-spacing: -0.02em;

    scroll-margin-top: 100px;

}



.single-entry-content h3 {

    font-size: 1.35rem;

    font-weight: 800;

    line-height: 1.35;

    color: var(--text);

    margin-top: 36px;

    margin-bottom: 16px;

    scroll-margin-top: 100px;

}



.single-entry-content h4 {

    font-size: 1.15rem;

    font-weight: 700;

    margin-top: 28px;

    margin-bottom: 14px;

}



.single-entry-content a {

    color: #2d5eea;

    font-weight: 700;

    text-decoration: none;

    background-image: linear-gradient(#2d5eea, #2d5eea);

    background-position: 0% 100%;

    background-repeat: no-repeat;

    background-size: 100% 2px;

    padding-bottom: 2px;

    transition: color 0.2s ease, background-size 0.25s ease, opacity 0.2s ease;

}



.single-entry-content a:hover {

    color: #1d4ed8;

    background-size: 100% 3px;

    opacity: 0.9;

}





/* Blockquotes */

.single-entry-content blockquote {

    margin: 32px 0;

    padding: 24px 28px;

    border-radius: 18px;

    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(124, 58, 237, 0.05) 100%);

    border-right: 4px solid var(--primaryA);

    font-size: 1.12rem;

    font-weight: 600;

    line-height: 1.8;

    color: var(--text);

    position: relative;

}



.single-entry-content blockquote p:last-child {

    margin-bottom: 0;

}



/* Code & Pre */

.single-entry-content pre {

    background: #0f172a;

    color: #f8fafc;

    border-radius: 18px;

    padding: 22px 24px;

    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    font-size: 0.92rem;

    line-height: 1.65;

    overflow-x: auto;

    margin: 32px 0;

    direction: ltr;

    text-align: left;

    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.20);

}



.single-entry-content code {

    background: rgba(37, 99, 235, 0.08);

    color: #1d4ed8;

    padding: 3px 8px;

    border-radius: 6px;

    font-size: 0.90em;

    font-family: ui-monospace, SFMono-Regular, monospace;

    direction: ltr;

    display: inline-block;

}



.single-entry-content pre code {

    background: transparent;

    color: inherit;

    padding: 0;

}



/* Lists */

.single-entry-content ul,

.single-entry-content ol {

    margin-bottom: 28px;

    padding-right: 24px;

}



.single-entry-content li {

    margin-bottom: 10px;

}



/* Images & Captions in Content */

.single-entry-content img {

    max-width: 100%;

    height: auto;

    border-radius: 18px;

    margin: 28px 0;

    box-shadow: var(--shadow-sm);

}



/* ─── Rich Content Tables (Responsive & Modern) ─── */

.responsive-table-scroll {

    width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

    margin: 36px 0;

    border-radius: 18px;

    border: 1px solid #e2e8f0;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);

    background: #ffffff;

}



/* Custom Scrollbar for Mobile Tables */

.responsive-table-scroll::-webkit-scrollbar {

    height: 6px;

}



.responsive-table-scroll::-webkit-scrollbar-track {

    background: #f1f5f9;

    border-radius: 99px;

}



.responsive-table-scroll::-webkit-scrollbar-thumb {

    background: #cbd5e1;

    border-radius: 99px;

}



.responsive-table-scroll::-webkit-scrollbar-thumb:hover {

    background: #2d5eea;

}



.single-entry-content table {

    width: 100%;

    min-width: 580px; /* Prevents text squishing on mobile */

    border-collapse: collapse;

    border-spacing: 0;

    font-size: 0.95rem;

    text-align: right;

    direction: rtl;

    background: #ffffff;

    margin: 0;

}



.single-entry-content table thead tr {

    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);

    color: #ffffff;

}



.single-entry-content table th {

    padding: 16px 20px;

    font-weight: 800;

    font-size: 0.94rem;

    letter-spacing: -0.01em;

    color: #ffffff;

    border-bottom: 2px solid #2d5eea;

    white-space: nowrap;

}



.single-entry-content table td {

    padding: 14px 20px;

    border-bottom: 1px solid #f1f5f9;

    color: #334155;

    line-height: 1.65;

    font-weight: 500;

    vertical-align: middle;

    transition: background 0.2s ease;

}



.single-entry-content table tbody tr:nth-child(even) {

    background: #f8fafc;

}



.single-entry-content table tbody tr:hover td {

    background: rgba(45, 94, 234, 0.04);

}



.single-entry-content table tbody tr:last-child td {

    border-bottom: none;

}



/* Tags Row */

.single-tags-row {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;

    margin-top: 40px;

    padding-top: 24px;

    border-top: 1px solid var(--stroke);

}



.tags-label {

    font-weight: 800;

    font-size: 0.90rem;

    color: var(--text);

}



.tags-list {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

}



.tag-chip {

    display: inline-block;

    padding: 5px 12px;

    border-radius: 999px;

    background: rgba(148, 163, 184, 0.12);

    color: var(--muted);

    font-size: 0.84rem;

    font-weight: 700;

    text-decoration: none;

    transition: background var(--transition), color var(--transition);

}



.tag-chip:hover {

    background: rgba(37, 99, 235, 0.12);

    color: var(--primaryA);

}



/* Bottom Share */

.single-bottom-share {

    margin-top: 32px;

    padding: 22px 28px;

    border-radius: 20px;

    background: rgba(248, 250, 252, 0.90);

    border: 1px solid var(--stroke);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    flex-wrap: wrap;

}



.share-prompt {

    font-weight: 800;

    font-size: 0.95rem;

    color: var(--text);

}



.share-links-group {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

}



.btn-share-pill {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 16px;

    border-radius: 999px;

    font-size: 0.85rem;

    font-weight: 800;

    text-decoration: none;

    color: #ffffff;

    transition: transform var(--transition), opacity var(--transition);

}



.btn-share-pill:hover {

    transform: translateY(-2px);

    opacity: 0.92;

}



.btn-share-pill.share-tw {

    background: #000000;

}



.btn-share-pill.share-in {

    background: #0a66c2;

}



.btn-share-pill.share-wa {

    background: #25d366;

}



/* Author Bio Card (Ahrefs Inspired Layout) */

.single-author-card {

    display: flex;

    gap: 32px;

    margin-top: 48px;

    padding: 0;

    border-radius: 16px;

    background: #f8fafc;

    border: 1px solid var(--stroke);

    overflow: hidden;

    align-items: stretch;

    box-shadow: var(--shadow-sm);

}



.author-card-photo-col {

    width: 240px;

    flex-shrink: 0;

    overflow: hidden;

    background: #e2e8f0;

}



.author-photo-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform var(--transition);

}



.single-author-card:hover .author-photo-img {

    transform: scale(1.03);

}



.author-card-content-col {

    padding: 32px 32px 32px 24px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    flex: 1;

}



.author-card-kicker {

    font-size: 0.90rem;

    color: #64748b;

    font-weight: 500;

    margin-bottom: 4px;

}



.author-card-name {

    font-size: 1.65rem;

    font-weight: 800;

    color: #0f172a;

    line-height: 1.25;

    margin-bottom: 14px;

}



.author-card-name a {

    color: inherit;

    text-decoration: none;

    transition: color var(--transition);

}



.author-card-name a:hover {

    color: var(--primaryA);

}



.author-card-description {

    font-size: 0.98rem;

    line-height: 1.68;

    color: #334155;

    margin-bottom: 20px;

}



.author-card-socials {

    display: flex;

    gap: 10px;

}



.author-social-badge {

    width: 34px;

    height: 34px;

    border-radius: 6px;

    background: #e2e8f0;

    color: #0a66c2;

    display: grid;

    place-items: center;

    text-decoration: none;

    transition: background var(--transition), transform var(--transition);

}



.author-social-badge:hover {

    background: #cbd5e1;

    transform: translateY(-2px);

}





.author-card-link {

    font-size: 0.88rem;

    font-weight: 800;

    color: var(--primaryA);

    text-decoration: none;

}



.author-card-link:hover {

    text-decoration: underline;

}



/* Post Nav Cards */

.single-post-nav {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

    margin-top: 40px;

}



.post-nav-card {

    display: flex;

    flex-direction: column;

    gap: 6px;

    padding: 20px 24px;

    border-radius: 18px;

    background: #ffffff;

    border: 1px solid var(--stroke);

    text-decoration: none;

    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);

}



.post-nav-card:hover {

    transform: translateY(-3px);

    border-color: rgba(37, 99, 235, 0.40);

    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.12);

}



.nav-direction {

    font-size: 0.80rem;

    font-weight: 800;

    color: var(--primaryA);

}



.nav-title {

    font-size: 0.98rem;

    font-weight: 800;

    color: var(--text);

    line-height: 1.45;

}





/* ─── Sticky Sidebar ─── */

.single-sidebar {

    position: sticky;

    top: 96px;

}



.sidebar-inner {

    display: flex;

    flex-direction: column;

    gap: 24px;

}



.sidebar-widget {

    background: rgba(255, 255, 255, 0.85);

    border: 1px solid var(--stroke);

    border-radius: 22px;

    padding: 24px;

    box-shadow: var(--shadow-sm);

    backdrop-filter: blur(14px);

}



/* TOC Widget */

.widget-toc .widget-title {

    font-size: 1.05rem;

    font-weight: 900;

    color: var(--text);

    margin-bottom: 14px;

    display: flex;

    align-items: center;

    gap: 8px;

}



.toc-progress-wrapper {

    width: 100%;

    height: 3px;

    background: rgba(148, 163, 184, 0.20);

    border-radius: 99px;

    margin-bottom: 16px;

    overflow: hidden;

}



.toc-progress-bar {

    height: 100%;

    width: 0%;

    background: linear-gradient(90deg, var(--primaryA), var(--accent3));

    transition: width 0.1s linear;

}



.toc-nav {

    max-height: 360px;

    overflow-y: auto;

    padding-left: 4px;

}



.toc-list {

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 4px;

}



.toc-item.toc-h3 {

    padding-right: 14px;

}



.toc-link {

    display: block;

    padding: 7px 12px;

    border-radius: 10px;

    font-size: 0.88rem;

    font-weight: 700;

    color: var(--muted);

    text-decoration: none;

    transition: background var(--transition), color var(--transition);

    line-height: 1.45;

}



.toc-link:hover {

    background: rgba(37, 99, 235, 0.08);

    color: var(--primaryA);

}



.toc-link.active {

    background: rgba(37, 99, 235, 0.12);

    color: #1d4ed8;

    font-weight: 800;

}



/* CTA Sidebar Widget */

.widget-cta-box {

    background: linear-gradient(135deg, #2d5eea 0%, #1d4ed8 100%);

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.20);

    box-shadow: 0 14px 35px rgba(45, 94, 234, 0.25);

}



.cta-box-badge {

    display: inline-block;

    padding: 4px 12px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.20);

    color: #ffffff;

    font-size: 0.78rem;

    font-weight: 800;

    margin-bottom: 12px;

    backdrop-filter: blur(4px);

}



.cta-box-title {

    font-size: 1.15rem;

    font-weight: 900;

    line-height: 1.4;

    color: #ffffff;

    margin-bottom: 10px;

}



.cta-box-text {

    font-size: 0.88rem;

    color: rgba(255, 255, 255, 0.90);

    line-height: 1.6;

    margin-bottom: 20px;

}



.cta-box-btn {

    width: 100%;

    background: #ffffff !important;

    color: #2d5eea !important;

    font-weight: 800 !important;

    border: none !important;

    transition: transform var(--transition), box-shadow var(--transition);

}



.cta-box-btn:hover {

    background: #f8fafc !important;

    color: #1d4ed8 !important;

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);

}



/* Author Mini Widget */

.widget-author-mini {

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.author-mini-head {

    display: flex;

    align-items: center;

    gap: 12px;

}



.mini-avatar {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    object-fit: cover;

}



.author-mini-meta {

    display: flex;

    flex-direction: column;

}



.author-mini-meta strong {

    font-size: 0.95rem;

    color: var(--text);

}



.author-mini-meta span {

    font-size: 0.78rem;

    color: var(--muted);

}



.author-mini-text {

    font-size: 0.85rem;

    color: var(--muted);

    line-height: 1.6;

}





/* ─── Related Posts Section ─── */

.single-related-section {

    padding: 72px 0 90px;

    background: var(--bg2);

    border-top: 1px solid var(--stroke);

}



.section-head {

    margin-bottom: 44px;

}



.section-title {

    font-size: 2rem;

    font-weight: 900;

    color: var(--text);

    margin-top: 12px;

}



.related-posts-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 32px;

}



.related-card {

    background: #ffffff;

    border-radius: 22px;

    overflow: hidden;

    border: 1px solid var(--stroke);

    box-shadow: var(--shadow-sm);

    transition: transform var(--transition), box-shadow var(--transition);

    display: flex;

    flex-direction: column;

}



.related-card:hover {

    transform: translateY(-6px);

    box-shadow: var(--shadow);

}



.related-card-image-link {

    position: relative;

    width: 100%;

    height: 200px;

    overflow: hidden;

    display: block;

    background: #0f172a;

}



.related-card-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;

}



.related-card:hover .related-card-img {

    transform: scale(1.06);

}



.related-card-img-placeholder {

    width: 100%;

    height: 100%;

    display: grid;

    place-items: center;

    color: #ffffff;

    font-weight: 900;

    font-size: 1.2rem;

    background: linear-gradient(135deg, var(--primaryA), var(--accent3));

}



.related-card-badge {

    position: absolute;

    top: 14px;

    right: 14px;

    padding: 5px 12px;

    border-radius: 999px;

    background: rgba(15, 23, 42, 0.70);

    color: #ffffff;

    font-size: 0.78rem;

    font-weight: 800;

    backdrop-filter: blur(8px);

}



.related-card-body {

    padding: 24px;

    display: flex;

    flex-direction: column;

    flex: 1;

}



.related-card-meta {

    font-size: 0.82rem;

    color: var(--muted);

    margin-bottom: 10px;

    font-weight: 600;

}



.rel-meta-sep {

    margin: 0 6px;

}



.related-card-title {

    font-size: 1.12rem;

    font-weight: 800;

    line-height: 1.45;

    margin-bottom: 10px;

}



.related-card-title a {

    color: var(--text);

    text-decoration: none;

    transition: color var(--transition);

}



.related-card-title a:hover {

    color: var(--primaryA);

}



.related-card-excerpt {

    font-size: 0.88rem;

    color: var(--muted);

    line-height: 1.6;

    margin-bottom: 18px;

    flex: 1;

}



.related-card-more {

    font-size: 0.88rem;

    font-weight: 800;

    color: var(--primaryA);

    text-decoration: none;

}





/* ─── Comments Section ─── */

.single-comments-area {

    margin-top: 56px;

    padding-top: 40px;

    border-top: 1px solid var(--stroke);

}



.comments-title {

    font-size: 1.5rem;

    font-weight: 900;

    color: var(--text);

    margin-bottom: 28px;

}



.comments-list {

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 24px;

    margin-bottom: 40px;

}



.comment-item-body {

    padding: 22px;

    border-radius: 20px;

    background: rgba(248, 250, 252, 0.85);

    border: 1px solid var(--stroke);

}



.comment-meta {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 12px;

}



.comment-author-avatar img {

    border-radius: 50%;

}



.comment-metadata {

    display: flex;

    flex-direction: column;

}



.comment-author-name {

    font-weight: 800;

    font-size: 0.98rem;

    color: var(--text);

}



.comment-date {

    font-size: 0.78rem;

    color: var(--muted);

}



.comment-content-text {

    font-size: 0.95rem;

    line-height: 1.7;

    color: #334155;

    margin-bottom: 10px;

}



.comment-reply-action a {

    font-size: 0.82rem;

    font-weight: 800;

    color: var(--primaryA);

    text-decoration: none;

}



/* Comment Form */

.zaki-comment-form {

    display: flex;

    flex-direction: column;

    gap: 18px;

    margin-top: 24px;

}



.form-group {

    display: flex;

    flex-direction: column;

    gap: 6px;

}



.form-group label {

    font-size: 0.88rem;

    font-weight: 800;

    color: var(--text);

}



.form-group input,

.form-group textarea {

    padding: 13px 16px;

    border-radius: 14px;

    border: 1px solid var(--stroke);

    background: #ffffff;

    font-family: inherit;

    font-size: 0.95rem;

    color: var(--text);

    outline: none;

    transition: border-color var(--transition), box-shadow var(--transition);

}



.form-group input:focus,

.form-group textarea:focus {

    border-color: var(--primaryA);

    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);

}



.comment-submit-btn {

    align-self: flex-start;

}



/* Hide top-right & post avatar profile images */

.mini-avatar,

.author-mini-head img,

.author-bio-avatar,

.author-card-avatar,

img.avatar {

    display: none !important;

}









/* ─── Single Post & Page Responsiveness ─── */

@media (max-width: 1024px) {

    .single-layout-grid {

        grid-template-columns: 1fr;

        gap: 32px;

    }



    /* On Mobile/Tablet, render sidebar widgets inline below content */

    .single-sidebar, .page-sidebar {

        position: static !important;

        display: block !important;

        width: 100%;

        margin-top: 36px;

    }



    /* Hide desktop TOC widget on mobile since mobile collapsible TOC is active */

    .single-sidebar #desktopTocWidget, .page-sidebar #desktopTocWidget {

        display: none !important;

    }



    .sidebar-inner {

        gap: 20px;

    }



    .related-posts-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (max-width: 768px) {

    .single-hero-shell, .page-hero-shell {

        padding: 85px 0 45px;

    }



    .page-hero-shell .page-title, .single-hero-shell .single-title {

        font-size: clamp(1.8rem, 6vw, 2.6rem);

        margin-bottom: 14px;

    }



    .page-hero-shell .page-lead, .single-hero-shell .single-lead {

        font-size: 1rem;

        line-height: 1.65;

        margin-bottom: 20px;

    }



    .single-article, .page-article-card {

        padding: 24px 18px;

        border-radius: 18px;

    }



    .single-meta-row {

        flex-direction: column;

        align-items: flex-start;

        gap: 14px;

    }



    .single-meta-divider {

        display: none;

    }



    .single-post-nav {

        grid-template-columns: 1fr;

    }



    .related-posts-grid {

        grid-template-columns: 1fr;

    }



    .single-author-card {

        flex-direction: column;

        align-items: center;

        text-align: center;

        padding: 24px 20px;

    }

}



@media (max-width: 640px) {

    .related-posts-grid {

        grid-template-columns: 1fr;

    }

}





/* ═══════════════════════════════════════════════

   BLOG INDEX & ARCHIVE TEMPLATE (Ahrefs Inspired)

═══════════════════════════════════════════════ */



/* Blog Hero Shell */

.blog-hero-shell {

    position: relative;

    padding: 130px 0 65px;

    margin-top: 0 !important;

    background: #2d5eea;

    color: #ffffff;

    text-align: center;

    overflow: hidden;

}



.blog-hero-wrap {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    max-width: 860px;

    margin: 0 auto;

    text-align: center;

}



.blog-hero-stars {

    margin-bottom: 16px;

    display: flex;

    justify-content: center;

}



.archive-kicker-tag {

    font-size: 0.82rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    color: rgba(255, 255, 255, 0.85);

    margin-bottom: 10px;

}



.blog-hero-title {

    font-size: clamp(2.4rem, 4vw + 1rem, 4rem);

    font-weight: 900;

    line-height: 1.18;

    color: #ffffff;

    margin-bottom: 16px;

}



.blog-hero-subtitle {

    font-size: clamp(1.05rem, 1.2vw + 0.8rem, 1.35rem);

    line-height: 1.6;

    color: rgba(255, 255, 255, 0.90);

    max-width: 680px;

    margin: 0 auto 24px;

}



.blog-hero-accent-mark {

    width: 24px;

    height: 16px;

    background: #ff8800;

    margin-top: 8px;

}



/* Category Navigation Filter Bar */

.blog-cat-bar {

    background: #ffffff;

    border-bottom: 1px solid var(--stroke);

    padding: 14px 0;

    position: sticky;

    top: 0;

    z-index: 800;

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);

}



.blog-cat-list {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    list-style: none;

    margin: 0;

    padding: 0;

    flex-wrap: wrap;

}



.blog-cat-list .cat-item a {

    display: inline-block;

    padding: 8px 18px;

    border-radius: 999px;

    font-size: 0.92rem;

    font-weight: 700;

    color: #475569;

    text-decoration: none;

    background: #f1f5f9;

    transition: all var(--transition);

}



.blog-cat-list .cat-item a:hover {

    color: #2d5eea;

    background: #e2e8f0;

}



.blog-cat-list .cat-item.active a {

    color: #ffffff;

    background: #2d5eea;

    box-shadow: 0 4px 12px rgba(45, 94, 234, 0.25);

}



/* Blog Body Container */

.blog-body-section {

    padding: 60px 0 80px;

    background: var(--bg);

}



/* Featured Hero Article Card (2-Column) */

.blog-hero-card {

    display: grid;

    grid-template-columns: 1.2fr 1fr;

    gap: 36px;

    background: #ffffff;

    border-radius: 20px;

    border: 1px solid var(--stroke);

    box-shadow: var(--shadow-sm);

    overflow: hidden;

    margin-bottom: 54px;

    transition: transform var(--transition), box-shadow var(--transition);

}



.blog-hero-card:hover {

    transform: translateY(-4px);

    box-shadow: var(--shadow-md);

}



.hero-card-media {

    position: relative;

    display: block;

    overflow: hidden;

    min-height: 320px;

}



.hero-card-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.4s ease;

}



.blog-hero-card:hover .hero-card-img {

    transform: scale(1.04);

}



.hero-card-img-placeholder {

    width: 100%;

    height: 100%;

    min-height: 320px;

    background: linear-gradient(135deg, #2d5eea 0%, #7c3aed 100%);

    display: grid;

    place-items: center;

    color: #ffffff;

    font-size: 1.4rem;

    font-weight: 800;

}



.hero-card-content {

    padding: 40px 40px 40px 24px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.hero-card-badge {

    align-self: flex-start;

    padding: 6px 14px;

    border-radius: 999px;

    font-size: 0.80rem;

    font-weight: 800;

    text-transform: uppercase;

    background: rgba(45, 94, 234, 0.10);

    color: #2d5eea;

    text-decoration: none;

    margin-bottom: 16px;

}



.hero-card-title {

    font-size: clamp(1.6rem, 2.2vw + 0.8rem, 2.2rem);

    font-weight: 900;

    line-height: 1.25;

    color: #0f172a;

    margin-bottom: 16px;

}



.hero-card-title a {

    color: inherit;

    text-decoration: none;

    transition: color var(--transition);

}



.hero-card-title a:hover {

    color: #2d5eea;

}



.hero-card-excerpt {

    font-size: 1.02rem;

    line-height: 1.68;

    color: #475569;

    margin-bottom: 24px;

}



.hero-card-meta {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 0.88rem;

    color: #64748b;

}



.blog-grid-heading {

    font-size: 1.6rem;

    font-weight: 900;

    color: #0f172a;

    margin-bottom: 28px;

}



/* 3-Column Articles Grid */

.blog-posts-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 32px;

}



.blog-card {

    display: flex;

    flex-direction: column;

    background: #ffffff;

    border-radius: 18px;

    border: 1px solid var(--stroke);

    box-shadow: var(--shadow-sm);

    overflow: hidden;

    transition: transform var(--transition), box-shadow var(--transition);

}



.blog-card:hover {

    transform: translateY(-4px);

    box-shadow: var(--shadow-md);

}



.blog-card-media {

    position: relative;

    display: block;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #e2e8f0;

}



.blog-card-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.4s ease;

}



.blog-card:hover .blog-card-img {

    transform: scale(1.05);

}



.blog-card-img-placeholder {

    width: 100%;

    height: 100%;

    background: linear-gradient(135deg, #1e293b 0%, #2d5eea 100%);

    display: grid;

    place-items: center;

    color: #ffffff;

    font-size: 1.1rem;

    font-weight: 800;

}



.blog-card-badge {

    position: absolute;

    top: 14px;

    right: 14px;

    padding: 5px 12px;

    border-radius: 999px;

    font-size: 0.76rem;

    font-weight: 800;

    background: rgba(15, 23, 42, 0.85);

    color: #ffffff;

    backdrop-filter: blur(4px);

}



.blog-card-body {

    padding: 24px;

    display: flex;

    flex-direction: column;

    flex: 1;

}



.blog-card-meta {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 0.84rem;

    color: #64748b;

    margin-bottom: 12px;

}



.blog-card-title {

    font-size: 1.22rem;

    font-weight: 800;

    line-height: 1.35;

    color: #0f172a;

    margin-bottom: 12px;

}



.blog-card-title a {

    color: inherit;

    text-decoration: none;

    transition: color var(--transition);

}



.blog-card-title a:hover {

    color: #2d5eea;

}



.blog-card-excerpt {

    font-size: 0.94rem;

    line-height: 1.62;

    color: #475569;

    margin-bottom: 20px;

    flex: 1;

}



.blog-card-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 16px;

    border-top: 1px solid #f1f5f9;

    font-size: 0.86rem;

}



.card-author {

    font-weight: 700;

    color: #334155;

}



.card-more-link {

    font-weight: 800;

    color: #2d5eea;

    text-decoration: none;

    transition: transform var(--transition);

}



.card-more-link:hover {

    transform: translateX(-3px);

}



/* Pagination */

.blog-pagination {

    margin-top: 54px;

    display: flex;

    justify-content: center;

}



.blog-pagination .nav-links {

    display: flex;

    gap: 8px;

    align-items: center;

}



.blog-pagination .page-numbers {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 42px;

    height: 42px;

    padding: 0 14px;

    border-radius: 12px;

    font-size: 0.94rem;

    font-weight: 800;

    color: #334155;

    background: #ffffff;

    border: 1px solid var(--stroke);

    text-decoration: none;

    transition: all var(--transition);

}



.blog-pagination .page-numbers:hover {

    color: #2d5eea;

    border-color: #2d5eea;

}



.blog-pagination .page-numbers.current {

    color: #ffffff;

    background: #2d5eea;

    border-color: #2d5eea;

    box-shadow: 0 4px 14px rgba(45, 94, 234, 0.25);

}



/* Newsletter Subscription Section */

.blog-newsletter-section {

    padding: 0 0 80px;

    background: var(--bg);

}



.newsletter-card {

    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);

    border-radius: 24px;

    padding: 50px 60px;

    color: #ffffff;

    display: grid;

    grid-template-columns: 1.4fr 1fr;

    gap: 40px;

    align-items: center;

    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);

}



.newsletter-badge {

    display: inline-block;

    padding: 6px 14px;

    border-radius: 999px;

    font-size: 0.82rem;

    font-weight: 800;

    background: rgba(255, 255, 255, 0.10);

    color: #60a5fa;

    margin-bottom: 14px;

}



.newsletter-title {

    font-size: clamp(1.5rem, 2vw + 0.8rem, 2.1rem);

    font-weight: 900;

    line-height: 1.28;

    color: #ffffff;

    margin-bottom: 12px;

}



.newsletter-desc {

    font-size: 0.98rem;

    line-height: 1.65;

    color: #94a3b8;

    margin: 0;

}



.newsletter-form {

    display: flex;

    flex-direction: column;

    gap: 14px;

}



.newsletter-input {

    padding: 15px 20px;

    border-radius: 14px;

    border: 1px solid rgba(255, 255, 255, 0.15);

    background: rgba(255, 255, 255, 0.08);

    color: #ffffff;

    font-size: 0.98rem;

    outline: none;

    transition: border-color var(--transition);

}



.newsletter-input:focus {

    border-color: #2d5eea;

    background: rgba(255, 255, 255, 0.12);

}



.newsletter-input::placeholder {

    color: #94a3b8;

}



.newsletter-btn {

    padding: 14px 24px;

    border-radius: 14px;

    background: #2d5eea;

    color: #ffffff;

    font-weight: 800;

    border: none;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    transition: background var(--transition);

}



.newsletter-btn:hover {

    background: #1d4ed8;

}



/* Responsiveness for Blog Page */

@media (max-width: 1024px) {

    .blog-posts-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .blog-hero-card {

        grid-template-columns: 1fr;

    }



    .newsletter-card {

        grid-template-columns: 1fr;

        padding: 36px 30px;

    }

}



@media (max-width: 640px) {

    .blog-posts-grid {

        grid-template-columns: 1fr;

    }



    .blog-hero-shell {

        padding-top: 100px;

    }



    .hero-card-content {

        padding: 24px;

    }

}





/* ═══════════════════════════════════════════════

   AHREFS EDITORIAL 2-COLUMN GRID STYLES

═══════════════════════════════════════════════ */



/* 2-Column Articles Grid */

.blog-posts-grid-2col {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    column-gap: 56px;

    row-gap: 44px;

    margin-bottom: 50px;

}



.ahrefs-card {

    display: flex;

    flex-direction: column;

    padding: 8px 12px 8px 0;

    position: relative;

    border-radius: 12px;

    transition: transform var(--transition);

}



/* Light Blue Highlight Box (e.g. 6th Card / Featured Card) */

.ahrefs-card.is-highlighted-card {

    background: #eaf1fe;

    padding: 32px 28px;

    border-radius: 14px;

}



/* Category Kicker */

.ahrefs-card-kicker {

    font-size: 0.78rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    color: #64748b;

    margin-bottom: 8px;

}



.ahrefs-card-kicker a {

    color: #64748b;

    text-decoration: none;

    transition: color var(--transition);

}



.ahrefs-card-kicker a:hover {

    color: #2d5eea;

}



/* Post Title */

.ahrefs-card-title {

    font-size: clamp(1.35rem, 1.8vw + 0.8rem, 1.70rem);

    font-weight: 800;

    line-height: 1.28;

    color: #2d5eea;

    margin-bottom: 12px;

}



.ahrefs-card-title a {

    color: #2d5eea;

    text-decoration: none;

    transition: color var(--transition);

}



.ahrefs-card-title a:hover {

    color: #1d4ed8;

    text-decoration: underline;

}



/* Excerpt */

.ahrefs-card-excerpt {

    font-size: 0.98rem;

    line-height: 1.62;

    color: #334155;

    margin-bottom: 20px;

    flex: 1;

}



/* Author Avatar & Meta Line */

.ahrefs-card-author-line {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 0.88rem;

    color: #64748b;

}



.ahrefs-author-avatar-img {

    width: 26px;

    height: 26px;

    border-radius: 50%;

    object-fit: cover;

    display: inline-block !important;

}



.ahrefs-author-name {

    font-weight: 700;

    color: #1e293b;

    text-decoration: none;

    transition: color var(--transition);

}



.ahrefs-author-name:hover {

    color: #2d5eea;

}



.ahrefs-post-date {

    color: #64748b;

    font-weight: 500;

}



/* Numbered Pagination (Matching Screenshot Chips) */

.blog-pagination {

    margin-top: 60px;

    margin-bottom: 40px;

    display: flex;

    justify-content: center;

}



.blog-pagination .nav-links {

    display: flex;

    gap: 6px;

    align-items: center;

}



.blog-pagination .page-numbers {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 36px;

    height: 36px;

    padding: 0 10px;

    border-radius: 4px;

    font-size: 0.92rem;

    font-weight: 800;

    color: #2d5eea;

    background: #eaf1fe;

    border: none;

    text-decoration: none;

    transition: all var(--transition);

}



.blog-pagination .page-numbers:hover {

    background: #2d5eea;

    color: #ffffff;

}



.blog-pagination .page-numbers.current {

    color: #ffffff;

    background: #2d5eea;

}



@media (max-width: 900px) {

    .blog-posts-grid-2col {

        grid-template-columns: 1fr;

        row-gap: 36px;

    }

}





/* ═══════════════════════════════════════════════

   RICH HOMEPAGE SECTION STYLES (MATCHING INDEX.HTML)

═══════════════════════════════════════════════ */



/* ─── SECTION 2: SERVICES ─────────────────────────────────── */

.sec-services {

    width: 100vw;

    position: relative;

    overflow: hidden;

    padding: 90px 0 100px;

    background: #ffffff;

    isolation: isolate;

}



.sec-services::before {

    content: "";

    position: absolute;

    top: -2px; left: 0; right: 0;

    height: 80px;

    background: #f0f4ff;

    clip-path: ellipse(55% 100% at 50% 0%);

    z-index: 1;

}



.sec-services .s-blob {

    position: absolute;

    border-radius: 50%;

    filter: blur(55px);

    opacity: 0.30;

    z-index: 0;

    pointer-events: none;

}

.s-blob-1 {

    width: 500px; height: 500px;

    top: -100px; right: -150px;

    background: radial-gradient(circle, #bfdbfe, transparent 65%);

}

.s-blob-2 {

    width: 420px; height: 420px;

    bottom: -80px; left: -100px;

    background: radial-gradient(circle, #ddd6fe, transparent 65%);

}



.sec-head {

    text-align: center;

    margin-bottom: 60px;

    position: relative;

    z-index: 2;

}



.sec-kicker {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 16px;

    border-radius: 999px;

    background: rgba(45, 94, 234, 0.08);

    color: #2d5eea;

    font-weight: 800;

    font-size: 0.88rem;

    border: 1px solid rgba(45, 94, 234, 0.18);

    margin-bottom: 16px;

    letter-spacing: 0.04em;

}

.sec-kicker::before {

    content: "";

    width: 7px; height: 7px;

    border-radius: 50%;

    background: #2d5eea;

    display: inline-block;

}



.sec-title {

    font-size: clamp(1.9rem, 2.8vw + 0.7rem, 2.9rem);

    font-weight: 900;

    line-height: 1.18;

    letter-spacing: -0.03em;

    color: #0f172a;

    margin-bottom: 14px;

}

.sec-title .hl {

    background: linear-gradient(135deg, #2d5eea, #1d4ed8);

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}



.sec-desc {

    color: #475569;

    font-size: 1.06rem;

    max-width: 560px;

    margin: 0 auto;

    line-height: 1.8;

}



.cards-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 22px;

    position: relative;

    z-index: 2;

}



.card-wide {

    grid-column: span 2;

}



.card {

    background: #ffffff;

    border: 1px solid rgba(148, 163, 184, 0.28);

    border-radius: 24px;

    padding: 32px 30px;

    position: relative;

    overflow: hidden;

    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);

    transition: transform .22s cubic-bezier(.4,0,.2,1),

                box-shadow .22s cubic-bezier(.4,0,.2,1),

                border-color .22s cubic-bezier(.4,0,.2,1);

    cursor: default;

}

.card:hover {

    transform: translateY(-5px);

    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.11);

    border-color: rgba(45, 94, 234, 0.30);

}



.card::after {

    content: "";

    position: absolute;

    top: 0; left: 0; right: 0;

    height: 3px;

    background: linear-gradient(90deg, #2d5eea, #1d4ed8);

    opacity: 0;

    transition: opacity .22s ease;

    border-radius: 24px 24px 0 0;

}

.card:hover::after { opacity: 1; }



.card-icon {

    width: 52px; height: 52px;

    border-radius: 14px;

    display: grid; place-items: center;

    font-size: 1.55rem;

    margin-bottom: 18px;

    position: relative;

    z-index: 1;

    flex-shrink: 0;

}



.icon-blue  { background: rgba(45, 94, 234, 0.10); }

.icon-violet{ background: rgba(124, 58, 237, 0.10); }

.icon-indigo{ background: rgba(79, 70, 229, 0.10); }

.icon-sky   { background: rgba(14, 165, 233, 0.10); }

.icon-rose  { background: rgba(244, 63, 94, 0.10); }

.icon-amber { background: rgba(245, 158, 11, 0.10); }



.card-title {

    font-size: 1.12rem;

    font-weight: 900;

    color: #0f172a;

    margin-bottom: 10px;

    line-height: 1.3;

}

.card-text {

    font-size: 0.93rem;

    color: #475569;

    line-height: 1.75;

}



.card-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 18px;

}

.ctag {

    display: inline-flex; align-items: center; gap: 6px;

    padding: 6px 12px;

    border-radius: 999px;

    background: rgba(45, 94, 234, 0.07);

    border: 1px solid rgba(45, 94, 234, 0.15);

    color: #2d5eea;

    font-size: 0.82rem;

    font-weight: 700;

}



.card-wide .card-body {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 32px;

    align-items: start;

}

.card-wide .card-visual {

    border-radius: 16px;

    overflow: hidden;

    min-height: 190px;

    background: linear-gradient(135deg, #1e3a8a, #2d5eea);

    display: flex; flex-direction: column;

    align-items: center; justify-content: center;

    gap: 12px;

    padding: 24px;

}



.dash-row {

    width: 100%;

    display: flex;

    gap: 8px;

    direction: ltr;

}

.dash-bar {

    flex: 1;

    border-radius: 6px;

    background: rgba(255, 255, 255, 0.18);

    position: relative;

    overflow: hidden;

}

.dash-bar-fill {

    position: absolute;

    bottom: 0; left: 0; right: 0;

    border-radius: 6px;

    background: linear-gradient(to top, rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0.30));

    animation: barGrow 2.5s ease-in-out infinite alternate;

}

.b1 { height: 60px; } .b1 .dash-bar-fill { height: 68%; animation-delay: 0s; }

.b2 { height: 60px; } .b2 .dash-bar-fill { height: 45%; animation-delay: .4s; }

.b3 { height: 60px; } .b3 .dash-bar-fill { height: 82%; animation-delay: .8s; }

.b4 { height: 60px; } .b4 .dash-bar-fill { height: 55%; animation-delay: 1.2s; }

.b5 { height: 60px; } .b5 .dash-bar-fill { height: 72%; animation-delay: 1.6s; }



@keyframes barGrow {

    0%   { transform: scaleY(0.85); }

    100% { transform: scaleY(1.08); }

}



.dash-label {

    color: rgba(255, 255, 255, 0.80);

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    direction: rtl;

}



.steps-row {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 0;

    margin-top: 22px;

    position: relative;

    z-index: 2;

    background: #ffffff;

    border: 1px solid rgba(148, 163, 184, 0.28);

    border-radius: 24px;

    overflow: hidden;

    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);

}



.step {

    padding: 30px 26px;

    position: relative;

    transition: background .22s ease;

}

.step:not(:last-child)::after {

    content: "";

    position: absolute;

    top: 20%; bottom: 20%;

    left: 0;

    width: 1px;

    background: rgba(148, 163, 184, 0.28);

}

.step:hover { background: rgba(45, 94, 234, 0.03); }



.step-num {

    font-size: 2rem;

    font-weight: 900;

    letter-spacing: -0.05em;

    line-height: 1;

    background: linear-gradient(135deg, #2d5eea, #1d4ed8);

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

    margin-bottom: 10px;

}

.step-title {

    font-size: 1rem;

    font-weight: 900;

    color: #0f172a;

    margin-bottom: 6px;

}

.step-text {

    font-size: 0.88rem;

    color: #64748b;

    line-height: 1.65;

}



.cta-banner {

    margin-top: 22px;

    border-radius: 24px;

    background: linear-gradient(135deg, #1e3a8a 0%, #2d5eea 55%, #1d4ed8 100%);

    padding: 44px 40px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;

    flex-wrap: wrap;

    position: relative;

    overflow: hidden;

    z-index: 2;

    box-shadow: 0 24px 60px rgba(45, 94, 234, 0.30);

}

.cta-banner::before {

    content: "";

    position: absolute;

    top: -60px; left: -60px;

    width: 260px; height: 260px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.06);

}

.cta-banner::after {

    content: "";

    position: absolute;

    bottom: -80px; right: -40px;

    width: 320px; height: 320px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.05);

}



.banner-left { position: relative; z-index: 1; }

.banner-title {

    font-size: clamp(1.3rem, 2vw + 0.5rem, 1.9rem);

    font-weight: 900;

    color: #ffffff;

    line-height: 1.25;

    margin-bottom: 8px;

}

.banner-sub {

    color: rgba(255, 255, 255, 0.75);

    font-size: 1rem;

}



.banner-right {

    display: flex; gap: 12px; flex-wrap: wrap;

    position: relative; z-index: 1;

}



.btn-white {

    display: inline-flex; align-items: center; gap: 10px;

    padding: 13px 22px;

    border-radius: 999px;

    font-family: inherit;

    font-size: 1rem;

    font-weight: 800;

    text-decoration: none;

    cursor: pointer;

    border: none;

    background: #ffffff;

    color: #2d5eea;

    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);

    transition: transform .2s ease, box-shadow .2s ease;

}

.btn-white:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24); }



.btn-outline-white {

    display: inline-flex; align-items: center; gap: 10px;

    padding: 13px 22px;

    border-radius: 999px;

    font-family: inherit;

    font-size: 1rem;

    font-weight: 800;

    text-decoration: none;

    cursor: pointer;

    background: transparent;

    color: #ffffff;

    border: 2px solid rgba(255, 255, 255, 0.45);

    backdrop-filter: blur(8px);

    transition: transform .2s ease, border-color .2s ease;

}

.btn-outline-white:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.80); }



/* ─── SECTION 3: PROOF & REVIEWS ─────────────────────────── */

.sec-proof {

    width: 100vw;

    position: relative;

    overflow: hidden;

    padding: 90px 0 100px;

    background: #f0f4ff;

    isolation: isolate;

}



.sec-proof::before {

    content: "";

    position: absolute;

    top: -2px; left: 0; right: 0;

    height: 80px;

    background: #ffffff;

    clip-path: ellipse(55% 100% at 50% 0%);

    z-index: 1;

}



.sec-proof .p-blob {

    position: absolute;

    border-radius: 50%;

    filter: blur(60px);

    opacity: 0.28;

    z-index: 0;

    pointer-events: none;

}

.p-blob-1 {

    width: 500px; height: 500px;

    top: 0; right: -130px;

    background: radial-gradient(circle, #bfdbfe, transparent 65%);

}

.p-blob-2 {

    width: 420px; height: 420px;

    bottom: 0; left: -110px;

    background: radial-gradient(circle, #ddd6fe, transparent 65%);

}

.p-blob-3 {

    width: 260px; height: 260px;

    top: 40%; left: 50%;

    transform: translate(-50%,-50%);

    background: radial-gradient(circle, rgba(45, 94, 234, 0.10), transparent 65%);

}



.proof-head {

    text-align: center;

    margin-bottom: 56px;

    position: relative;

    z-index: 2;

}

.proof-kicker {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 16px;

    border-radius: 999px;

    background: rgba(45, 94, 234, 0.08);

    color: #2d5eea;

    font-weight: 800;

    font-size: 0.88rem;

    border: 1px solid rgba(45, 94, 234, 0.18);

    margin-bottom: 16px;

    letter-spacing: 0.04em;

}

.proof-kicker::before {

    content: "";

    width: 7px; height: 7px;

    border-radius: 50%;

    background: #2d5eea;

    display: inline-block;

}

.proof-title {

    font-size: clamp(1.9rem, 2.8vw + 0.7rem, 2.9rem);

    font-weight: 900;

    line-height: 1.18;

    letter-spacing: -0.03em;

    color: #0f172a;

    margin-bottom: 14px;

}

.proof-title .hl {

    background: linear-gradient(135deg, #2d5eea, #1d4ed8);

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}

.proof-desc {

    color: #475569;

    font-size: 1.06rem;

    max-width: 520px;

    margin: 0 auto;

    line-height: 1.8;

}



.big-stats {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 16px;

    margin-bottom: 52px;

    position: relative;

    z-index: 2;

}

.bstat {

    background: #ffffff;

    border: 1px solid rgba(148, 163, 184, 0.28);

    border-radius: 22px;

    padding: 28px 22px;

    text-align: center;

    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);

    transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s ease;

    position: relative;

    overflow: hidden;

}

.bstat::after {

    content: "";

    position: absolute;

    top: 0; left: 0; right: 0;

    height: 3px;

    background: linear-gradient(90deg, #2d5eea, #1d4ed8);

    opacity: 0;

    transition: opacity .22s ease;

}

.bstat:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(15, 23, 42, 0.10); }

.bstat:hover::after { opacity: 1; }

.bstat-icon { font-size: 1.8rem; margin-bottom: 10px; display: block; }

.bstat-num {

    font-size: 2.4rem;

    font-weight: 900;

    letter-spacing: -0.05em;

    line-height: 1;

    background: linear-gradient(135deg, #2d5eea, #1d4ed8);

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

    display: block;

}

.bstat-lbl {

    font-size: 0.86rem;

    color: #64748b;

    margin-top: 6px;

    display: block;

    font-weight: 600;

}



.testimonials {

    columns: 3;

    column-gap: 20px;

    position: relative;

    z-index: 2;

    margin-bottom: 56px;

}



.tcard {

    break-inside: avoid;

    background: #ffffff;

    border: 1px solid rgba(148, 163, 184, 0.26);

    border-radius: 22px;

    padding: 26px 24px;

    margin-bottom: 20px;

    display: flex;

    flex-direction: column;

    gap: 14px;

    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);

    transition: transform .24s cubic-bezier(.4,0,.2,1),

                box-shadow .24s ease,

                border-color .24s ease;

    position: relative;

    overflow: hidden;

}

.tcard:hover {

    transform: translateY(-5px);

    box-shadow: 0 22px 52px rgba(15, 23, 42, 0.11);

    border-color: rgba(45, 94, 234, 0.28);

}



.tcard::before {

    content: "";

    position: absolute;

    top: 0; left: 0; right: 0;

    height: 3px;

    background: linear-gradient(90deg, #2d5eea, #1d4ed8);

    opacity: 0;

    transition: opacity .24s ease;

    border-radius: 22px 22px 0 0;

}

.tcard:hover::before { opacity: 1; }



.tcard::after {

    content: "❝";

    position: absolute;

    top: 10px; left: 16px;

    font-size: 4rem;

    line-height: 1;

    color: rgba(45, 94, 234, 0.06);

    font-family: Georgia, serif;

    pointer-events: none;

    direction: ltr;

}



.tcard-featured {

    background: linear-gradient(148deg, #1e3a8a 0%, #2d5eea 48%, #1d4ed8 100%);

    border-color: transparent;

    box-shadow: 0 22px 56px rgba(45, 94, 234, 0.32);

}

.tcard-featured:hover {

    box-shadow: 0 30px 68px rgba(45, 94, 234, 0.40);

    border-color: transparent;

}

.tcard-featured::before { background: rgba(255,255,255,0.25); opacity: 1; }

.tcard-featured::after  { color: rgba(255,255,255,0.08); }

.tcard-featured .t-text { color: rgba(255,255,255,0.90); }

.tcard-featured .t-name { color: #ffffff; }

.tcard-featured .t-role { color: rgba(255,255,255,0.62); }

.tcard-featured .t-stars{ color: #fbbf24; }

.tcard-featured .t-author{ border-top-color: rgba(255,255,255,0.14); }

.tcard-featured .t-verified {

    color: rgba(255,255,255,0.82);

    background: rgba(255,255,255,0.12);

    border-color: rgba(255,255,255,0.20);

}



.t-stars {

    display: flex;

    gap: 3px;

    color: #f59e0b;

    font-size: 1rem;

    direction: ltr;

}



.t-text {

    font-size: 0.95rem;

    color: #334155;

    line-height: 1.78;

    flex: 1;

    position: relative;

    z-index: 1;

}



.t-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

}

.t-tag {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding: 4px 10px;

    border-radius: 999px;

    font-size: 0.74rem;

    font-weight: 700;

    background: rgba(45, 94, 234, 0.07);

    border: 1px solid rgba(45, 94, 234, 0.14);

    color: #2d5eea;

}

.tcard-featured .t-tag {

    background: rgba(255,255,255,0.14);

    border-color: rgba(255,255,255,0.22);

    color: rgba(255,255,255,0.85);

}



.t-author {

    display: flex;

    align-items: center;

    gap: 12px;

    padding-top: 14px;

    border-top: 1px solid rgba(148,163,184,0.20);

}

.t-avatar {

    width: 44px; height: 44px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    font-size: 1.05rem;

    font-weight: 900;

    color: #fff;

    flex-shrink: 0;

    border: 2px solid rgba(255,255,255,0.25);

}

.av-blue   { background: linear-gradient(135deg, #2d5eea, #1d4ed8); }

.av-violet { background: linear-gradient(135deg, #7c3aed, #6d28d9); }

.av-indigo { background: linear-gradient(135deg, #4f46e5, #4338ca); }

.av-sky    { background: linear-gradient(135deg, #0ea5e9, #0284c7); }

.av-rose   { background: linear-gradient(135deg, #f43f5e, #e11d48); }

.av-teal   { background: linear-gradient(135deg, #14b8a6, #0d9488); }



.t-info { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.t-name { font-weight: 900; font-size: 0.93rem; color: #0f172a; }

.t-role { font-size: 0.80rem; color: #64748b; }

.t-verified {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    font-size: 0.72rem;

    font-weight: 700;

    color: #2d5eea;

    background: rgba(45, 94, 234, 0.07);

    border: 1px solid rgba(45, 94, 234, 0.14);

    padding: 3px 9px;

    border-radius: 999px;

    white-space: nowrap;

    flex-shrink: 0;

}



.clients-belt {

    position: relative;

    z-index: 2;

}



.belt-header {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-bottom: 28px;

}

.belt-line {

    flex: 1;

    height: 1px;

    background: linear-gradient(to left, transparent, rgba(148,163,184,0.35));

}

.belt-line.r {

    background: linear-gradient(to right, transparent, rgba(148,163,184,0.35));

}

.belt-label {

    font-size: 0.82rem;

    font-weight: 800;

    color: #94a3b8;

    letter-spacing: 0.10em;

    text-transform: uppercase;

    white-space: nowrap;

}



.belt-tracks {

    display: flex;

    flex-direction: column;

    gap: 14px;

    overflow: hidden;

    -webkit-mask-image: linear-gradient(to left, transparent 0%, black 10%, black 90%, transparent 100%);

    mask-image: linear-gradient(to left, transparent 0%, black 10%, black 90%, transparent 100%);

}



.belt-track {

    display: flex;

    width: max-content;

    gap: 12px;

}

.belt-track-1 { animation: beltScroll1 30s linear infinite; }

.belt-track-2 { animation: beltScroll2 36s linear infinite; }



@keyframes beltScroll1 { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

@keyframes beltScroll2 { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }



.logo-card {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    padding: 12px 20px;

    border-radius: 16px;

    background: #ffffff;

    border: 1px solid rgba(148,163,184,0.24);

    box-shadow: 0 3px 12px rgba(15,23,42,0.06);

    white-space: nowrap;

    cursor: default;

    user-select: none;

    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;

    flex-shrink: 0;

}

.logo-card:hover {

    transform: translateY(-3px);

    box-shadow: 0 10px 28px rgba(15,23,42,0.11);

    border-color: rgba(45, 94, 234, 0.22);

}



.logo-ico {

    width: 38px; height: 38px;

    border-radius: 10px;

    display: grid;

    place-items: center;

    font-size: 1.2rem;

    flex-shrink: 0;

}

.lic-blue   { background: rgba(45, 94, 234, 0.09); }

.lic-green  { background: rgba(16, 185, 129, 0.09); }

.lic-orange { background: rgba(249, 115, 22, 0.09); }

.lic-purple { background: rgba(124, 58, 237, 0.09); }

.lic-sky    { background: rgba(14, 165, 233, 0.09); }



.logo-body { display: flex; flex-direction: column; gap: 1px; }

.logo-name { font-size: 0.88rem; font-weight: 900; color: #0f172a; line-height: 1.2; }

.logo-sector { font-size: 0.72rem; color: #94a3b8; font-weight: 600; }



.belt-trust {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 32px;

    margin-top: 32px;

    flex-wrap: wrap;

}

.btrust-item {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 0.88rem;

    color: #64748b;

    font-weight: 600;

}

.btrust-dot {

    width: 8px; height: 8px;

    border-radius: 50%;

    background: linear-gradient(135deg, #2d5eea, #1d4ed8);

    flex-shrink: 0;

}

.btrust-item strong { color: #0f172a; font-weight: 900; }



/* ─── SECTION 4: PORTFOLIO ─────────────────────────────────── */

.sec-portfolio {

    width: 100vw;

    position: relative;

    overflow: hidden;

    padding: 90px 0 100px;

    background: #ffffff;

    isolation: isolate;

}



.sec-portfolio::before {

    content: "";

    position: absolute;

    top: -2px; left: 0; right: 0;

    height: 80px;

    background: #f0f4ff;

    clip-path: ellipse(55% 100% at 50% 0%);

    z-index: 1;

}



.sec-portfolio .pf-blob {

    position: absolute;

    border-radius: 50%;

    filter: blur(60px);

    opacity: 0.22;

    z-index: 0;

    pointer-events: none;

}

.pf-blob-1 { width: 520px; height: 520px; top: 80px; left: -180px; background: radial-gradient(circle, #bfdbfe, transparent 65%); }

.pf-blob-2 { width: 440px; height: 440px; bottom: 60px; right: -140px; background: radial-gradient(circle, #ddd6fe, transparent 65%); }



.pf-head { text-align: center; margin-bottom: 16px; position: relative; z-index: 2; }

.pf-kicker {

    display: inline-flex; align-items: center; gap: 8px;

    padding: 8px 16px; border-radius: 999px;

    background: rgba(45, 94, 234, 0.08); color: #2d5eea;

    font-weight: 800; font-size: 0.88rem;

    border: 1px solid rgba(45, 94, 234, 0.18);

    margin-bottom: 16px; letter-spacing: 0.04em;

}

.pf-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2d5eea; display: inline-block; }



.pf-title { font-size: clamp(1.9rem, 2.8vw + 0.7rem, 2.9rem); font-weight: 900; line-height: 1.18; letter-spacing: -0.03em; color: #0f172a; margin-bottom: 14px; }

.pf-title .hl { background: linear-gradient(135deg, #2d5eea, #1d4ed8); -webkit-background-clip: text; background-clip: text; color: transparent; }

.pf-desc { color: #475569; font-size: 1.06rem; max-width: 520px; margin: 0 auto 40px; line-height: 1.8; }



.filter-tabs { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 44px; position: relative; z-index: 2; }

.ftab {

    display: inline-flex; align-items: center; gap: 7px;

    padding: 9px 18px; border-radius: 999px;

    font-family: inherit; font-size: 0.90rem; font-weight: 700;

    border: 1px solid rgba(148, 163, 184, 0.32); background: #ffffff;

    color: #475569; cursor: pointer; transition: all .2s cubic-bezier(.4,0,.2,1);

    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05); user-select: none;

}

.ftab:hover { border-color: rgba(45, 94, 234, 0.30); color: #2d5eea; transform: translateY(-1px); }

.ftab.active { background: linear-gradient(135deg, #2d5eea, #1d4ed8); color: #ffffff; border-color: transparent; box-shadow: 0 8px 22px rgba(45, 94, 234, 0.30); }



.pf-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; position: relative; z-index: 2; margin-bottom: 48px; }

.pf-item-1 { grid-column: span 7; }

.pf-item-2 { grid-column: span 5; }

.pf-item-3 { grid-column: span 4; }

.pf-item-4 { grid-column: span 4; }

.pf-item-5 { grid-column: span 4; }



.pf-card {

    border-radius: 24px; overflow: hidden; position: relative; cursor: pointer;

    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.10); border: 1px solid rgba(148, 163, 184, 0.22);

    transition: transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s cubic-bezier(.4,0,.2,1);

    background: #0f172a; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end;

}

.pf-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 28px 64px rgba(15, 23, 42, 0.18); }



.pf-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 6s ease; z-index: 0; }

.pf-card:hover .pf-bg { transform: scale(1.06); }

.pf-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,10,25,0.92) 0%, rgba(5,10,25,0.55) 45%, rgba(5,10,25,0.10) 100%); z-index: 1; transition: opacity .28s ease; }

.pf-content { position: relative; z-index: 2; padding: 24px 24px 26px; }



.pf-cat { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 0.76rem; font-weight: 800; color: #ffffff; background: rgba(45, 94, 234, 0.55); border: 1px solid rgba(99,162,255,0.35); backdrop-filter: blur(8px); margin-bottom: 10px; }

.pf-name { font-size: 1.15rem; font-weight: 900; color: #ffffff; line-height: 1.3; margin-bottom: 8px; }

.pf-item-1 .pf-name { font-size: 1.35rem; }

.pf-excerpt { font-size: 0.87rem; color: rgba(255,255,255,0.70); line-height: 1.65; margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }



.pf-results { display: flex; gap: 8px; flex-wrap: wrap; }

.pf-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; font-size: 0.78rem; font-weight: 800; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.20); color: rgba(255,255,255,0.90); backdrop-filter: blur(6px); }

.pf-chip.green  { background: rgba(16,185,129,0.22); border-color: rgba(16,185,129,0.35); color: #6ee7b7; }

.pf-chip.blue   { background: rgba(45,94,234,0.22);  border-color: rgba(99,162,255,0.35); color: #93c5fd; }

.pf-chip.violet { background: rgba(124,58,237,0.22); border-color: rgba(167,139,250,0.35);color: #c4b5fd; }

.pf-chip.amber  { background: rgba(245,158,11,0.22); border-color: rgba(252,211,77,0.35); color: #fcd34d; }



.pf-arrow { position: absolute; top: 20px; left: 20px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); backdrop-filter: blur(8px); display: grid; place-items: center; color: #fff; font-size: 1rem; z-index: 3; opacity: 0; transform: scale(0.75); transition: opacity .22s ease, transform .22s ease; }

.pf-card:hover .pf-arrow { opacity: 1; transform: scale(1); }



.pf-bg-1 { background-image: url("https://images.pexels.com/photos/1181244/pexels-photo-1181244.jpeg?auto=compress&cs=tinysrgb&w=1200"); }

.pf-bg-2 { background-image: url("https://images.pexels.com/photos/3861969/pexels-photo-3861969.jpeg?auto=compress&cs=tinysrgb&w=900"); }

.pf-bg-3 { background-image: url("https://images.pexels.com/photos/265087/pexels-photo-265087.jpeg?auto=compress&cs=tinysrgb&w=900"); }

.pf-bg-4 { background-image: url("https://images.pexels.com/photos/577585/pexels-photo-577585.jpeg?auto=compress&cs=tinysrgb&w=900"); }

.pf-bg-5 { background-image: url("https://images.pexels.com/photos/669615/pexels-photo-669615.jpeg?auto=compress&cs=tinysrgb&w=900"); }



.tech-strip {

    background: #f8faff;

    border: 1px solid rgba(148, 163, 184, 0.25);

    border-radius: 24px;

    padding: 36px 36px;

    display: grid;

    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    gap: 32px;

    position: relative;

    z-index: 2;

    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);

}



.tech-left h3 { font-size: 1.15rem; font-weight: 900; color: #0f172a; margin-bottom: 8px; }

.tech-left p { font-size: 0.91rem; color: #475569; line-height: 1.7; max-width: 340px; }

.tech-divider { width: 1px; height: 80px; background: linear-gradient(to bottom, transparent, rgba(148,163,184,0.40), transparent); }

.tech-icons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

.ticon { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 12px; background: #ffffff; border: 1px solid rgba(148, 163, 184, 0.28); font-size: 0.82rem; font-weight: 800; color: #334155; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05); transition: transform .18s ease, box-shadow .18s ease; }

.ticon:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10); }



/* ─── SECTION 5: PRICING ──────────────────────────────────── */

.sec-pricing {

    width: 100vw; position: relative; overflow: hidden; padding: 90px 0 100px; background: #f0f4ff; isolation: isolate;

}

.sec-pricing::before { content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 80px; background: #ffffff; clip-path: ellipse(55% 100% at 50% 0%); z-index: 1; }

.sec-pricing .pr-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.28; z-index: 0; pointer-events: none; }

.pr-blob-1 { width: 520px; height: 520px; top: -80px; right: -160px; background: radial-gradient(circle, #bfdbfe, transparent 65%); }

.pr-blob-2 { width: 440px; height: 440px; bottom: -60px; left: -120px; background: radial-gradient(circle, #ddd6fe, transparent 65%); }



.pr-head { text-align: center; margin-bottom: 20px; position: relative; z-index: 2; }

.pr-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: rgba(45, 94, 234, 0.08); color: #2d5eea; font-weight: 800; font-size: 0.88rem; border: 1px solid rgba(45, 94, 234, 0.18); margin-bottom: 16px; letter-spacing: 0.04em; }

.pr-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2d5eea; display: inline-block; }

.pr-title { font-size: clamp(1.9rem, 2.8vw + 0.7rem, 2.9rem); font-weight: 900; line-height: 1.18; letter-spacing: -0.03em; color: #0f172a; margin-bottom: 14px; }

.pr-title .hl { background: linear-gradient(135deg, #2d5eea, #1d4ed8); -webkit-background-clip: text; background-clip: text; color: transparent; }

.pr-desc { color: #475569; font-size: 1.06rem; max-width: 500px; margin: 0 auto 32px; line-height: 1.8; }



.billing-toggle { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 52px; position: relative; z-index: 2; }

.toggle-lbl { font-size: 0.95rem; font-weight: 700; color: #475569; transition: color .2s ease; }

.toggle-lbl.active { color: #0f172a; }

.toggle-wrap { position: relative; width: 52px; height: 28px; cursor: pointer; }

.toggle-wrap input { opacity: 0; width: 0; height: 0; position: absolute; }

.toggle-track { position: absolute; inset: 0; border-radius: 999px; background: #cbd5e1; transition: background .25s ease; }

.toggle-wrap input:checked + .toggle-track { background: linear-gradient(135deg, #2d5eea, #1d4ed8); }

.toggle-thumb { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; background: #ffffff; box-shadow: 0 2px 6px rgba(15,23,42,0.20); transition: transform .25s cubic-bezier(.4,0,.2,1); }

.toggle-wrap input:checked ~ .toggle-thumb { transform: translateX(-24px); }

.save-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.25); color: #059669; font-size: 0.78rem; font-weight: 800; white-space: nowrap; }



.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; position: relative; z-index: 2; margin-bottom: 48px; align-items: start; }

.pr-card { background: #ffffff; border: 1px solid rgba(148, 163, 184, 0.28); border-radius: 26px; padding: 36px 32px 32px; position: relative; transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s cubic-bezier(.4,0,.2,1); box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06); overflow: hidden; }

.pr-card:hover { transform: translateY(-6px); box-shadow: 0 24px 56px rgba(15, 23, 42, 0.12); }

.pr-card-featured { background: linear-gradient(160deg, #1e3a8a 0%, #2d5eea 45%, #1d4ed8 100%); border-color: transparent; box-shadow: 0 24px 64px rgba(45, 94, 234, 0.38); transform: translateY(-8px) scale(1.02); }

.pr-card-featured:hover { transform: translateY(-14px) scale(1.02); box-shadow: 0 36px 80px rgba(45, 94, 234, 0.46); }



.popular-badge { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.30); backdrop-filter: blur(8px); font-size: 0.78rem; font-weight: 800; color: #ffffff; white-space: nowrap; }

.pr-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem; margin-bottom: 20px; margin-top: 6px; }

.pr-icon-light  { background: rgba(45, 94, 234, 0.09); }

.pr-icon-white  { background: rgba(255, 255, 255, 0.18); }

.pr-icon-violet { background: rgba(124, 58, 237, 0.09); }



.pr-plan-name { font-size: 1.1rem; font-weight: 900; color: #0f172a; margin-bottom: 4px; }

.pr-card-featured .pr-plan-name { color: #ffffff; }

.pr-tagline { font-size: 0.88rem; color: #64748b; margin-bottom: 24px; line-height: 1.5; }

.pr-card-featured .pr-tagline { color: rgba(255,255,255,0.70); }



.pr-price-block { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid rgba(148,163,184,0.22); }

.pr-card-featured .pr-price-block { border-bottom-color: rgba(255,255,255,0.18); }

.pr-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; }

.pr-currency { font-size: 1.1rem; font-weight: 800; color: #334155; }

.pr-card-featured .pr-currency { color: rgba(255,255,255,0.80); }

.pr-amount { font-size: 3.0rem; font-weight: 900; letter-spacing: -0.05em; line-height: 1; color: #0f172a; transition: all .3s ease; }

.pr-card-featured .pr-amount { color: #ffffff; }

.pr-period { font-size: 0.88rem; color: #64748b; font-weight: 600; }

.pr-card-featured .pr-period { color: rgba(255,255,255,0.65); }

.pr-billing-note { font-size: 0.80rem; color: #94a3b8; margin-top: 4px; }

.pr-card-featured .pr-billing-note { color: rgba(255,255,255,0.55); }



.pr-features { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-bottom: 28px; }

.pr-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.91rem; color: #334155; line-height: 1.55; }

.pr-card-featured .pr-features li { color: rgba(255,255,255,0.88); }

.pr-features li .fcheck { width: 20px; height: 20px; border-radius: 50%; background: rgba(45, 94, 234, 0.10); border: 1px solid rgba(45, 94, 234, 0.20); display: grid; place-items: center; font-size: 0.70rem; color: #2d5eea; flex-shrink: 0; margin-top: 1px; }

.pr-card-featured .pr-features li .fcheck { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.28); color: #ffffff; }

.pr-features li .fcheck-x { width: 20px; height: 20px; border-radius: 50%; background: rgba(148,163,184,0.12); border: 1px solid rgba(148,163,184,0.22); display: grid; place-items: center; font-size: 0.70rem; color: #94a3b8; flex-shrink: 0; margin-top: 1px; }

.pr-features li.unavail { opacity: 0.50; }



.pr-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px 20px; border-radius: 999px; font-family: inherit; font-size: 0.97rem; font-weight: 800; text-decoration: none; cursor: pointer; border: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; user-select: none; }

.pr-btn-outline { background: transparent; border: 2px solid rgba(45, 94, 234, 0.30); color: #2d5eea; }

.pr-btn-outline:hover { background: rgba(45, 94, 234, 0.06); border-color: rgba(45, 94, 234, 0.55); transform: translateY(-2px); }

.pr-btn-white { background: #ffffff; color: #2d5eea; box-shadow: 0 10px 28px rgba(0,0,0,0.16); }

.pr-btn-white:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0,0,0,0.22); }

.pr-btn-solid { background: linear-gradient(135deg, #2d5eea, #1d4ed8); color: #ffffff; box-shadow: 0 10px 28px rgba(45, 94, 234, 0.30); }

.pr-btn-solid:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(45, 94, 234, 0.40); }



/* ─── SECTION 6: CONTACT ──────────────────────────────────── */

.sec-contact { width: 100vw; position: relative; overflow: hidden; padding: 90px 0 80px; background: #ffffff; isolation: isolate; }

.sec-contact::before { content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 80px; background: #f0f4ff; clip-path: ellipse(55% 100% at 50% 0%); z-index: 1; }

.sec-contact .ct-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.20; z-index: 0; pointer-events: none; }

.ct-blob-1 { width: 480px; height: 480px; top: 40px; right: -140px; background: radial-gradient(circle, #bfdbfe, transparent 65%); }

.ct-blob-2 { width: 400px; height: 400px; bottom: 200px; left: -120px; background: radial-gradient(circle, #ddd6fe, transparent 65%); }



.contact-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 40px; align-items: start; position: relative; z-index: 2; margin-bottom: 80px; }

.ct-info { padding-top: 0px; }

.ct-kicker { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: rgba(45, 94, 234, 0.08); color: #2d5eea; font-weight: 800; font-size: 0.82rem; border: 1px solid rgba(45, 94, 234, 0.18); margin-bottom: 12px; letter-spacing: 0.04em; }

.ct-kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2d5eea; display: inline-block; }

.ct-title { font-size: clamp(1.5rem, 2vw + 0.5rem, 2.2rem); font-weight: 900; line-height: 1.18; letter-spacing: -0.03em; color: #0f172a; margin-bottom: 10px; }

.ct-title .hl { background: linear-gradient(135deg, #2d5eea, #1d4ed8); -webkit-background-clip: text; background-clip: text; color: transparent; }

.ct-sub { color: #475569; font-size: 0.92rem; line-height: 1.55; margin-bottom: 18px; max-width: 420px; }



.ct-details { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }

.ct-detail { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #f8faff; border: 1px solid rgba(148,163,184,0.25); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; text-decoration: none; }

.ct-detail:hover { transform: translateX(-4px); box-shadow: 0 8px 24px rgba(45, 94, 234, 0.10); border-color: rgba(45, 94, 234, 0.25); }



.ct-detail-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 1rem; flex-shrink: 0; }

.di-blue   { background: rgba(45, 94, 234, 0.10); }

.di-green  { background: rgba(16, 185, 129, 0.10); }

.di-violet { background: rgba(124, 58, 237, 0.10); }

.di-amber  { background: rgba(245, 158, 11, 0.10); }



.ct-detail-body { display: flex; flex-direction: column; gap: 1px; }

.ct-detail-label { font-size: 0.72rem; font-weight: 700; color: #94a3b8; letter-spacing: 0.05em; text-transform: uppercase; }

.ct-detail-val { font-size: 0.85rem; font-weight: 700; color: #0f172a; word-break: break-word; }



.ct-socials { display: flex; gap: 8px; flex-wrap: wrap; }

.ct-social { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(148,163,184,0.28); background: #ffffff; font-size: 0.82rem; font-weight: 700; color: #334155; text-decoration: none; box-shadow: 0 2px 8px rgba(15,23,42,0.05); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease; }

.ct-social:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15,23,42,0.10); border-color: rgba(45, 94, 234, 0.30); color: #2d5eea; }



.ct-form-wrap { background: #ffffff; border: 1px solid rgba(148,163,184,0.28); border-radius: 24px; padding: 28px 28px; box-shadow: 0 16px 52px rgba(15,23,42,0.09); position: relative; overflow: hidden; }

.ct-form-wrap::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #2d5eea, #1d4ed8); border-radius: 24px 24px 0 0; }



.form-title { font-size: 1.20rem; font-weight: 900; color: #0f172a; margin-bottom: 4px; }

.form-sub { font-size: 0.88rem; color: #64748b; margin-bottom: 18px; line-height: 1.5; }



.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }

.form-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }

.form-group.full { grid-column: span 2; }

.form-label { font-size: 0.82rem; font-weight: 800; color: #334155; letter-spacing: 0.01em; }



.form-input, .form-select, .form-textarea {

    width: 100%; padding: 10px 14px; border-radius: 10px;

    border: 1.5px solid rgba(148,163,184,0.35); background: #f8faff;

    font-family: inherit; font-size: 0.90rem; color: #0f172a; outline: none;

    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; direction: rtl;

}

.form-input::placeholder, .form-textarea::placeholder { color: #94a3b8; }

.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: #2d5eea; box-shadow: 0 0 0 3px rgba(45,94,234,0.12); background: #ffffff; }



.form-select { cursor: pointer; appearance: none; }

.form-textarea { resize: vertical; min-height: 70px; line-height: 1.5; }



.range-wrap { position: relative; margin-top: 4px; }

.form-range { width: 100%; height: 6px; border-radius: 999px; appearance: none; background: #e2e8f0; cursor: pointer; direction: ltr; }

.form-range::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #2d5eea; border: 3px solid #ffffff; box-shadow: 0 2px 8px rgba(45,94,234,0.35); cursor: grab; }

.range-labels { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.78rem; color: #94a3b8; font-weight: 600; direction: ltr; }

.range-val { display: inline-block; font-size: 0.86rem; font-weight: 800; color: #2d5eea; margin-top: 6px; }



@media (max-width: 1024px) {

    .cards-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }

    .card-wide { grid-column: span 2; }

    .big-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }

    .testimonials { columns: 2; }

    .pf-item-1 { grid-column: span 12; }

    .pf-item-2 { grid-column: span 12; }

    .pf-item-3, .pf-item-4, .pf-item-5 { grid-column: span 4; }

    .pricing-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }

    .contact-grid { grid-template-columns: 1fr; }

}



@media (max-width: 640px) {

    .cards-grid { grid-template-columns: 1fr; }

    .card-wide { grid-column: span 1; }

    .big-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }

    .testimonials { columns: 1; }

    .pf-item-3, .pf-item-4, .pf-item-5 { grid-column: span 12; }

    .pricing-grid { grid-template-columns: 1fr; }

    .form-row { grid-template-columns: 1fr; }

}



/* ──────────────────────────────────────────────

 * 13. Category Pages & Directory Styles

 * ────────────────────────────────────────────── */

.cat-hero-shell, .cat-dir-hero-shell {

    position: relative;

    background: #2d5eea; /* Target Blue/Purple Accent #2d5eea */

    padding: 110px 0 65px;

    margin-top: 0 !important;

    color: #ffffff;

    text-align: center;

    overflow: hidden;

    isolation: isolate;

    border-bottom: 1px solid rgba(255, 255, 255, 0.15);

}



.cat-hero-shell::before, .cat-dir-hero-shell::before {

    content: "";

    position: absolute;

    top: -50px;

    left: 50%;

    transform: translateX(-50%);

    width: 700px;

    height: 350px;

    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 70%);

    pointer-events: none;

    z-index: 0;

}



.cat-hero-wrap, .cat-dir-hero-wrap {

    position: relative;

    z-index: 1;

    max-width: 840px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.cat-hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 6px 18px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.18);

    border: 1px solid rgba(255, 255, 255, 0.32);

    color: #ffffff;

    font-size: 0.88rem;

    font-weight: 800;

    margin-bottom: 20px;

    backdrop-filter: blur(4px);

}



.cat-hero-title, .cat-dir-hero-title {

    font-size: clamp(2.2rem, 4vw, 3.4rem);

    font-weight: 900;

    color: #ffffff;

    line-height: 1.22;

    margin-bottom: 16px;

    letter-spacing: -0.03em;

}



.cat-hero-subtitle, .cat-dir-hero-subtitle {

    font-size: 1.12rem;

    color: rgba(255, 255, 255, 0.90);

    line-height: 1.7;

    max-width: 720px;

    margin-bottom: 24px;

    font-weight: 500;

}



.cat-hero-meta {

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 0.92rem;

    color: rgba(255, 255, 255, 0.85);

    font-weight: 600;

}



.cat-count-pill {

    display: inline-block;

    padding: 2px 7px;

    border-radius: 99px;

    background: rgba(45, 94, 234, 0.12);

    color: #2d5eea;

    font-size: 0.76rem;

    font-weight: 800;

    margin-right: 6px;

}



.cat-body-section, .cat-dir-body-section {

    padding: 60px 0 90px;

    background: #f8fafc;

}



/* Category Featured Card */

.cat-featured-card {

    display: grid;

    grid-template-columns: 1fr 1.1fr;

    gap: 32px;

    background: #ffffff;

    border: 1px solid var(--stroke);

    border-radius: 24px;

    padding: 28px;

    margin-bottom: 48px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);

    transition: transform var(--transition), box-shadow var(--transition);

}



.cat-featured-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 20px 45px rgba(45, 94, 234, 0.10);

}



.cat-featured-img-wrap {

    border-radius: 16px;

    overflow: hidden;

    display: block;

    aspect-ratio: 16/10;

}



.cat-featured-img-wrap img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.4s ease;

}



.cat-featured-card:hover .cat-featured-img-wrap img {

    transform: scale(1.04);

}



.cat-featured-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.cat-featured-badge {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 4px 12px;

    border-radius: 99px;

    background: #fef3c7;

    color: #b45309;

    font-size: 0.80rem;

    font-weight: 800;

    margin-bottom: 14px;

    align-self: flex-start;

}



.cat-featured-title {

    font-size: 1.55rem;

    font-weight: 900;

    line-height: 1.35;

    margin-bottom: 12px;

}



.cat-featured-title a {

    color: #0f172a;

    text-decoration: none;

    transition: color 0.2s ease;

}



.cat-featured-title a:hover {

    color: #2d5eea;

}



.cat-featured-excerpt {

    font-size: 0.96rem;

    color: #64748b;

    line-height: 1.6;

    margin-bottom: 22px;

}



/* Category Grid Cards Thumbnails */

.cat-grid-card {

    background: #ffffff;

    border: 1px solid var(--stroke);

    border-radius: 20px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);

}



.cat-grid-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 16px 36px rgba(45, 94, 234, 0.10);

    border-color: rgba(45, 94, 234, 0.30);

}



.cat-card-thumb-wrap {

    width: 100%;

    aspect-ratio: 16/9;

    overflow: hidden;

    display: block;

    background: #e2e8f0;

}



.cat-card-thumb-wrap img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.4s ease;

}



.cat-grid-card:hover .cat-card-thumb-wrap img {

    transform: scale(1.05);

}



.cat-card-body {

    padding: 24px;

    display: flex;

    flex-direction: column;

    flex: 1;

}



.placeholder-img-wrap {

    background: linear-gradient(135deg, #2d5eea 0%, #1d4ed8 100%);

    display: flex;

    align-items: center;

    justify-content: center;

}



.cat-placeholder-gfx {

    color: #ffffff;

    font-size: 1.5rem;

    font-weight: 900;

    display: flex;

    align-items: center;

    gap: 8px;

}



/* Category Directory Grid */

.cat-dir-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 28px;

}



.cat-dir-card {

    background: #ffffff;

    border: 1px solid var(--stroke);

    border-radius: 22px;

    padding: 28px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);

}



.cat-dir-card:hover {

    transform: translateY(-4px);

    border-color: rgba(45, 94, 234, 0.40);

    box-shadow: 0 16px 40px rgba(45, 94, 234, 0.12);

}



.cat-card-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 14px;

}



.cat-card-icon-title {

    display: flex;

    align-items: center;

    gap: 10px;

}



.cat-card-folder-icon {

    font-size: 1.4rem;

}



.cat-card-title {

    font-size: 1.22rem;

    font-weight: 900;

    margin: 0;

}



.cat-card-title a {

    color: #0f172a;

    text-decoration: none;

    transition: color 0.2s ease;

}



.cat-card-title a:hover {

    color: #2d5eea;

}



.cat-card-count-badge {

    padding: 4px 10px;

    border-radius: 99px;

    background: #eff6ff;

    color: #2d5eea;

    font-size: 0.82rem;

    font-weight: 800;

    white-space: nowrap;

}



.cat-card-desc {

    font-size: 0.90rem;

    color: #64748b;

    line-height: 1.6;

    margin-bottom: 20px;

}



.cat-card-posts {

    background: #f8fafc;

    border-radius: 14px;

    padding: 14px 16px;

    margin-bottom: 22px;

}



.cat-card-posts-label {

    display: block;

    font-size: 0.78rem;

    font-weight: 800;

    color: #94a3b8;

    margin-bottom: 8px;

}



.cat-posts-mini-list {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.cat-posts-mini-list li a {

    font-size: 0.86rem;

    font-weight: 700;

    color: #334155;

    text-decoration: none;

    line-height: 1.4;

    transition: color 0.2s ease;

    display: flex;

    align-items: flex-start;

    gap: 6px;

}



.cat-posts-mini-list li a:hover {

    color: #2d5eea;

}



.cat-card-footer {

    margin-top: auto;

    padding-top: 14px;

    border-top: 1px solid #f1f5f9;

}



.cat-card-link-btn {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    font-size: 0.90rem;

    font-weight: 800;

    color: #2d5eea;

    text-decoration: none;

    transition: gap 0.2s ease;

}



.cat-card-link-btn:hover {

    gap: 10px;

    text-decoration: underline;

}



@media (max-width: 1024px) {

    .cat-dir-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .cat-featured-card { grid-template-columns: 1fr; gap: 20px; }

}



@media (max-width: 640px) {

    .cat-dir-grid { grid-template-columns: 1fr; }

}



/* ──────────────────────────────────────────────

 * 14. Global Consultation Popup Modal Styles

 * ────────────────────────────────────────────── */

.consultation-modal-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition: opacity 0.3s ease, visibility 0.3s ease;

}



.consultation-modal-overlay.active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}



.modal-backdrop {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(15, 23, 42, 0.75);

    backdrop-filter: blur(8px);

}



.modal-card {

    position: relative;

    z-index: 10;

    width: 100%;

    max-width: 640px;

    background: #ffffff;

    border-radius: 24px;

    padding: 36px 32px 32px;

    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.35);

    border: 1px solid rgba(255, 255, 255, 0.40);

    transform: scale(0.92) translateY(20px);

    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    direction: rtl;

    max-height: 90vh;

    overflow-y: auto;

}



.consultation-modal-overlay.active .modal-card {

    transform: scale(1) translateY(0);

}



.modal-close-btn {

    position: absolute;

    top: 20px;

    left: 20px;

    width: 36px;

    height: 36px;

    border-radius: 50%;

    background: #f1f5f9;

    border: none;

    font-size: 1.1rem;

    color: #64748b;

    cursor: pointer;

    display: grid;

    place-items: center;

    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;

}



.modal-close-btn:hover {

    background: #e2e8f0;

    color: #0f172a;

    transform: rotate(90deg);

}



.modal-head {

    margin-bottom: 24px;

}



.modal-badge {

    display: inline-block;

    padding: 4px 12px;

    border-radius: 99px;

    background: #eff6ff;

    color: #2d5eea;

    font-size: 0.82rem;

    font-weight: 800;

    margin-bottom: 10px;

}



.modal-title {

    font-size: 1.45rem;

    font-weight: 900;

    color: #0f172a;

    line-height: 1.3;

    margin-bottom: 8px;

}



.modal-sub {

    font-size: 0.88rem;

    color: #64748b;

    line-height: 1.55;

    margin: 0;

}



.modal-contact-form .form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px;

    margin-bottom: 12px;

}



.modal-contact-form .form-group {

    display: flex;

    flex-direction: column;

    gap: 6px;

}



.modal-contact-form .form-group.full {

    margin-bottom: 20px;

}



.modal-form-actions {

    margin-top: 18px;

}



.modal-submit-btn {

    width: 100%;

    padding: 14px;

    border-radius: 12px;

    font-size: 0.98rem;

    font-weight: 800;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    background: #2d5eea;

    color: #ffffff;

    border: none;

    cursor: pointer;

    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;

}



.modal-submit-btn:hover {

    background: #1d4ed8;

    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(45, 94, 234, 0.28);

}



.modal-alert-msg {

    margin-top: 16px;

    padding: 12px 16px;

    border-radius: 12px;

    font-size: 0.88rem;

    font-weight: 700;

    text-align: center;

}



.modal-alert-msg.success {

    background: #dcfce7;

    color: #15803d;

    border: 1px solid #bbf7d0;

}



.modal-alert-msg.error {

    background: #fee2e2;

    color: #b91c1c;

    border: 1px solid #fca5a5;

}



@media (max-width: 640px) {

    .modal-card { padding: 28px 20px 24px; }

    .modal-contact-form .form-row { grid-template-columns: 1fr; }

}





/* ──────────────────────────────────────────────

 * 14. Static Page Header & Layout (#2d5eea Hero)

 * ────────────────────────────────────────────── */

.page-hero-shell {

    position: relative;

    background: #2d5eea; /* Signature Brand Blue */

    padding: 110px 0 65px;

    margin-top: 0 !important;

    color: #ffffff;

    overflow: hidden;

    isolation: isolate;

    border-bottom: 1px solid rgba(255, 255, 255, 0.15);

}



.page-hero-shell::before {

    content: "";

    position: absolute;

    top: -50px;

    left: 50%;

    transform: translateX(-50%);

    width: 700px;

    height: 350px;

    background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 70%);

    pointer-events: none;

    z-index: 0;

}



.page-hero-wrap {

    position: relative;

    z-index: 1;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    max-width: 860px;

    margin: 0 auto;

}



.page-hero-stars {

    margin-bottom: 16px;

}



.page-category-kicker {

    margin-bottom: 18px;

}



.page-category-kicker .category-kicker-link {

    display: inline-block;

    padding: 6px 18px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.18);

    border: 1px solid rgba(255, 255, 255, 0.32);

    color: #ffffff;

    font-size: 0.88rem;

    font-weight: 800;

    backdrop-filter: blur(4px);

    text-decoration: none;

}



.page-hero-shell .page-title {

    font-size: clamp(2.2rem, 3.8vw + 1rem, 3.6rem);

    line-height: 1.22;

    font-weight: 900;

    letter-spacing: -0.03em;

    color: #ffffff;

    margin-bottom: 20px;

    max-width: 900px;

    text-align: center;

}



.page-hero-shell .page-lead {

    font-size: 1.15rem;

    line-height: 1.8;

    color: rgba(255, 255, 255, 0.88);

    margin-bottom: 24px;

    max-width: 760px;

    font-weight: 500;

    text-align: center;

}



.page-date-line {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    font-size: 0.90rem;

    color: rgba(255, 255, 255, 0.82);

    font-weight: 500;

}



.page-body-shell {

    padding: 60px 0 90px;

    background: var(--bg);

}



.page-body-wrap {

    max-width: 960px;

    margin: 0 auto;

}



.page-featured-media {

    margin-bottom: 48px;

    margin-top: -40px;

    position: relative;

    z-index: 10;

    border-radius: var(--radius);

    overflow: hidden;

    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);

    background: #ffffff;

    border: 1px solid var(--stroke);

}



.page-article {

    background: #ffffff;

    border-radius: var(--radius);

    padding: 48px 44px;

    border: 1px solid var(--stroke);

    box-shadow: var(--shadow-sm);

}



@media (max-width: 768px) {

    .page-article {

        padding: 28px 20px;

    }

}



/* ──────────────────────────────────────────────

 * 15. Agency Service Page UI Components

 * ────────────────────────────────────────────── */



/* 1. Metrics Bar */

.service-metrics-bar {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

    gap: 20px;

    background: #ffffff;

    border: 1px solid var(--stroke);

    border-radius: 20px;

    padding: 24px 30px;

    margin-bottom: 44px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);

    text-align: center;

}



.metric-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}



.metric-number {

    font-size: 2.2rem;

    font-weight: 900;

    color: #2d5eea;

    line-height: 1.1;

    margin-bottom: 4px;

}



.metric-label {

    font-size: 0.88rem;

    font-weight: 700;

    color: #64748b;

}



/* 2. Grid Cards */

.service-grid-cards {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

    gap: 24px;

    margin: 32px 0 44px;

}



.service-card {

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 20px;

    padding: 28px 24px;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);

    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;

    position: relative;

}



.service-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 16px 40px rgba(45, 94, 234, 0.12);

    border-color: rgba(45, 94, 234, 0.35);

}



.service-card-icon {

    width: 52px;

    height: 52px;

    border-radius: 14px;

    background: rgba(45, 94, 234, 0.08);

    color: #2d5eea;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.6rem;

    margin-bottom: 18px;

}



.service-card-title {

    font-size: 1.18rem;

    font-weight: 800;

    color: #0f172a;

    margin-bottom: 10px;

}



.service-card-desc {

    font-size: 0.94rem;

    color: #64748b;

    line-height: 1.6;

    margin: 0;

}



/* 3. Timeline Steps */

.service-timeline {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 20px;

    margin: 36px 0 48px;

    position: relative;

}



.timeline-step {

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 18px;

    padding: 24px;

    position: relative;

    transition: background 0.3s ease, border-color 0.3s ease;

}



.timeline-step:hover {

    background: #ffffff;

    border-color: #2d5eea;

}



.step-num {

    font-size: 1.8rem;

    font-weight: 900;

    color: #2d5eea;

    opacity: 0.85;

    margin-bottom: 12px;

}



.step-title {

    font-size: 1.05rem;

    font-weight: 800;

    color: #0f172a;

    margin-bottom: 8px;

}



.step-desc {

    font-size: 0.90rem;

    color: #64748b;

    line-height: 1.55;

    margin: 0;

}



/* 4. CTA Banner */

.service-cta-banner {

    background: linear-gradient(135deg, #2d5eea 0%, #1d4ed8 100%);

    border-radius: 24px;

    padding: 40px 36px;

    color: #ffffff;

    text-align: center;

    margin: 48px 0;

    box-shadow: 0 16px 40px rgba(45, 94, 234, 0.22);

    position: relative;

    overflow: hidden;

}



.service-cta-banner h3 {

    color: #ffffff !important;

    font-size: 1.65rem;

    font-weight: 900;

    margin-bottom: 12px;

}



.service-cta-banner p {

    color: rgba(255, 255, 255, 0.92);

    font-size: 1.05rem;

    max-width: 640px;

    margin: 0 auto 24px;

}



.service-cta-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 14px 34px;

    border-radius: 99px;

    background: #ffffff;

    color: #2d5eea !important;

    font-weight: 800;

    font-size: 1rem;

    text-decoration: none;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);

    transition: transform 0.2s ease, box-shadow 0.2s ease;

    cursor: pointer;

    border: none;

}



.service-cta-btn:hover {

    transform: translateY(-3px);

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);

}



/* 5. Accordion FAQs */

.service-faq-list {

    display: flex;

    flex-direction: column;

    gap: 16px;

    margin: 32px 0 44px;

}



.service-faq-item {

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 16px;

    overflow: hidden;

    transition: border-color 0.2s ease, box-shadow 0.2s ease;

}



.service-faq-item[open] {

    border-color: #2d5eea;

    box-shadow: 0 8px 24px rgba(45, 94, 234, 0.08);

}



.service-faq-summary {

    padding: 18px 22px;

    font-size: 1.05rem;

    font-weight: 800;

    color: #0f172a;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: space-between;

    user-select: none;

    list-style: none;

}



.service-faq-summary::-webkit-details-marker {

    display: none;

}



.service-faq-chevron {

    width: 28px;

    height: 28px;

    border-radius: 50%;

    background: #f1f5f9;

    color: #2d5eea;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.90rem;

    transition: transform 0.3s ease, background 0.3s ease;

}



.service-faq-item[open] .service-faq-chevron {

    transform: rotate(180deg);

    background: #2d5eea;

    color: #ffffff;

}



.service-faq-body {

    padding: 14px 22px 20px;

    font-size: 0.96rem;

    color: #475569;

    line-height: 1.7;

    border-top: 1px solid #f1f5f9;

}



/* 6. Trust Badges */

.tech-trust-bar {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    flex-wrap: wrap;

    padding: 20px;

    background: #f8fafc;

    border-radius: 16px;

    margin: 36px 0;

    border: 1px dashed #cbd5e1;

}



.tech-badge {

    padding: 6px 16px;

    border-radius: 99px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    color: #334155;

    font-size: 0.85rem;

    font-weight: 700;

}



/* Page In-Content CTA Banner */

.page-in-content-cta {

    margin-top: 48px;

    padding-top: 36px;

    border-top: 1px solid var(--stroke);

}



.page-cta-inner {

    background: linear-gradient(135deg, #2d5eea 0%, #1d4ed8 100%);

    border-radius: 20px;

    padding: 36px 30px;

    color: #ffffff;

    text-align: center;

    box-shadow: 0 16px 40px rgba(45, 94, 234, 0.20);

}



.page-cta-inner h3 {

    color: #ffffff !important;

    font-size: 1.45rem;

    font-weight: 900;

    margin-bottom: 10px;

}



.page-cta-inner p {

    color: rgba(255, 255, 255, 0.90);

    font-size: 0.98rem;

    margin-bottom: 22px;

}



.page-cta-inner .btn-primary {

    background: #ffffff;

    color: #2d5eea !important;

    font-weight: 800;

    padding: 13px 28px;

    border-radius: 99px;

    border: none;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);

    cursor: pointer;

    transition: transform 0.2s ease;

}



.page-cta-inner .btn-primary:hover {

    transform: translateY(-2px);

}



/* ──────────────────────────────────────────────

 * 16. 404 Error Page Styling (100% Full Width Hero Canvas)

 * ────────────────────────────────────────────── */

.error-404-standalone {

    width: 100% !important;

    max-width: 100% !important;

    padding: 0 !important;

    margin: 0 !important;

    overflow: hidden;

}



.error-404-hero {

    position: relative;

    background: #2d5eea;

    width: 100% !important;

    min-height: calc(85vh - 80px);

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 100px 24px;

    box-sizing: border-box;

}



.error-404-watermark {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    font-size: clamp(14rem, 35vw, 28rem);

    font-weight: 900;

    color: rgba(255, 255, 255, 0.06);

    user-select: none;

    pointer-events: none;

    line-height: 1;

    z-index: 1;

}



.error-404-content {

    position: relative;

    z-index: 2;

    max-width: 780px;

    margin: 0 auto;

}



.error-404-stars {

    margin-bottom: 24px;

}



.error-404-badge {

    display: inline-flex;

    align-items: center;

    background: rgba(255, 255, 255, 0.16);

    border: 1px solid rgba(255, 255, 255, 0.32);

    color: #ffffff;

    padding: 8px 22px;

    border-radius: 99px;

    font-size: 0.95rem;

    font-weight: 700;

    margin-bottom: 28px;

    backdrop-filter: blur(10px);

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

}



.error-404-title {

    color: #ffffff;

    font-size: clamp(2.1rem, 5vw, 3.4rem);

    font-weight: 900;

    line-height: 1.25;

    margin-bottom: 20px;

    letter-spacing: -0.02em;

}



.error-404-subtitle {

    color: rgba(255, 255, 255, 0.92);

    font-size: clamp(1rem, 2vw, 1.18rem);

    line-height: 1.7;

    margin-bottom: 40px;

    max-width: 660px;

    margin-left: auto;

    margin-right: auto;

}



.error-404-actions {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 16px;

    flex-wrap: wrap;

}



.btn-404-primary {

    background: #ffffff;

    color: #2d5eea !important;

    font-weight: 800;

    font-size: 1.05rem;

    padding: 15px 34px;

    border-radius: 99px;

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);

    transition: transform 0.25s ease, box-shadow 0.25s ease;

}



.btn-404-primary:hover {

    transform: translateY(-3px);

    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25);

}



.btn-404-secondary {

    background: rgba(255, 255, 255, 0.12);

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.35);

    font-weight: 800;

    font-size: 1.05rem;

    padding: 15px 32px;

    border-radius: 99px;

    cursor: pointer;

    backdrop-filter: blur(8px);

    transition: background 0.25s ease, transform 0.25s ease;

}



.btn-404-secondary:hover {

    background: rgba(255, 255, 255, 0.24);

    transform: translateY(-3px);

}



@media (max-width: 640px) {

    .error-404-hero {

        padding: 70px 18px;

        min-height: calc(75vh - 60px);

    }



    .error-404-actions {

        flex-direction: column;

        width: 100%;

    }



    .btn-404-primary,

    .btn-404-secondary {

        width: 100%;

        justify-content: center;

    }

}