:root {

--primary: #2563eb;
--primary-dark: #1d4ed8;
--primary-light: #eff6ff;

--accent: #7c3aed;
--accent-light: #f5f3ff;

--dark: #0f172a;
--dark-soft: #1e293b;

--text: #334155;
--text-light: #64748b;

--border: #e2e8f0;
--background: #f8fafc;
--white: #ffffff;

--success: #059669;
--success-light: #ecfdf5;

--security: #2563eb;
--comptia: #7c3aed;
--study: #059669;
--cyber: #db2777;

--shadow-sm:
    0 2px 8px rgba(15, 23, 42, 0.05);

--shadow-md:
    0 10px 30px rgba(15, 23, 42, 0.08);

--shadow-lg:
    0 20px 50px rgba(15, 23, 42, 0.12);

--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 24px;

--container: 1180px;

}



*,
*::before,
*::after {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
scroll-padding-top: 90px;
}

body {


margin: 0;

font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

background: var(--background);

color: var(--text);

line-height: 1.7;

-webkit-font-smoothing: antialiased;


}

img {
max-width: 100%;
display: block;
}

a {
color: inherit;
text-decoration: none;
}

button,
a {
-webkit-tap-highlight-color: transparent;
}

button {
font: inherit;
}

/* =========================================================
3. CONTAINER
========================================================= */

.container {

width: min(
    calc(100% - 40px),
    var(--container)
);

margin-inline: auto;


}

/* =========================================================
4. HEADER
========================================================= */

.blog-header {


position: sticky;

top: 0;

z-index: 1000;

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

backdrop-filter: blur(14px);

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


}

.header-container {


min-height: 74px;

width: min(
    calc(100% - 40px),
    var(--container)
);

margin-inline: auto;

display: flex;

align-items: center;

justify-content: space-between;

gap: 30px;

}

/* =========================================================
BRAND
========================================================= */

.brand {


display: inline-flex;

align-items: center;

gap: 11px;

flex-shrink: 0;


}

.brand-icon {


width: 42px;

height: 42px;

display: grid;

place-items: center;

border-radius: 12px;

color: var(--white);

background:
    linear-gradient(
        135deg,
        var(--primary),
        var(--accent)
    );

box-shadow:
    0 7px 18px rgba(37, 99, 235, 0.22);


}

.brand-icon i {
font-size: 18px;
}

.brand-text {


display: flex;

flex-direction: column;

line-height: 1.15;


}

.brand-text strong {


font-size: 17px;

font-weight: 800;

color: var(--dark);


}

.brand-text small {


margin-top: 3px;

font-size: 11px;

font-weight: 600;

color: var(--text-light);

letter-spacing: 0.3px;


}

/* =========================================================
NAVIGATION
========================================================= */

.blog-navigation {


display: flex;

align-items: center;

gap: 5px;


}

.blog-navigation a {


position: relative;

padding:
    9px 12px;

border-radius: 8px;

color: var(--text-light);

font-size: 14px;

font-weight: 600;

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


}

.blog-navigation a:hover {


color: var(--primary);

background:
    var(--primary-light);


}

.blog-navigation a.active {

color: var(--primary);

background:
    var(--primary-light);


}

.mobile-menu-button {


display: none;

width: 42px;

height: 42px;

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

border-radius: 10px;

background: var(--white);

color: var(--dark);

cursor: pointer;


}



.breadcrumb-section {


padding-top: 22px;


}

.breadcrumbs {


display: flex;

align-items: center;

flex-wrap: wrap;

gap: 8px;

font-size: 13px;

color: var(--text-light);

}

.breadcrumbs a {


color: var(--primary);

font-weight: 600;


}

.breadcrumbs i {


font-size: 9px;

opacity: 0.6;


}



.learning-hero {


position: relative;

overflow: hidden;

padding:
    86px 0
    92px;

background:

    radial-gradient(
        circle at 85% 20%,
        rgba(124, 58, 237, 0.14),
        transparent 34%
    ),

    radial-gradient(
        circle at 10% 80%,
        rgba(37, 99, 235, 0.12),
        transparent 34%
    ),

    linear-gradient(
        135deg,
        #f8fbff,
        #ffffff
    );


}

.learning-hero::before {


content: "";

position: absolute;

width: 360px;

height: 360px;

right: -160px;

top: -180px;

border-radius: 50%;

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


}

.hero-content {


max-width: 780px;


}

.hero-label {


display: inline-flex;

align-items: center;

gap: 8px;

margin-bottom: 20px;

padding:
    7px 12px;

border-radius: 999px;

color: var(--primary);

background:
    var(--primary-light);

font-size: 12px;

font-weight: 800;

letter-spacing: 0.7px;


}

.hero-label i {
font-size: 12px;
}

.learning-hero h1 {


margin: 0;

color: var(--dark);

font-size:
    clamp(42px, 7vw, 72px);

line-height: 1.05;

letter-spacing: -2.5px;

font-weight: 850;


}

.learning-hero h1 span {

background:
    linear-gradient(
        90deg,
        var(--primary),
        var(--accent)
    );

-webkit-background-clip: text;

background-clip: text;

color: transparent;


}

.hero-description {


max-width: 680px;

margin:
    24px 0 0;

color: var(--text-light);

font-size:
    clamp(17px, 2vw, 20px);

line-height: 1.75;


}

.hero-actions {


display: flex;

align-items: center;

flex-wrap: wrap;

gap: 12px;

margin-top: 32px;


}

.primary-button,
.secondary-button {


min-height: 48px;

display: inline-flex;

align-items: center;

justify-content: center;

gap: 9px;

padding:
    0 20px;

border-radius: 11px;

font-size: 14px;

font-weight: 700;

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


}

.primary-button {

color: var(--white);

background:
    linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

box-shadow:
    0 9px 22px
    rgba(37, 99, 235, 0.22);


}

.primary-button:hover {


transform: translateY(-2px);

box-shadow:
    0 13px 28px
    rgba(37, 99, 235, 0.28);


}

.secondary-button {


color: var(--dark);

background: var(--white);

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


}

.secondary-button:hover {


background:
    var(--primary-light);

border-color:
    #bfdbfe;


}

/* =========================================================
7. SECTION COMMON STYLES
========================================================= */

.featured-section,
.articles-section,
.resource-section,
.categories-section {


padding:
    80px 0;


}

.section-heading {

display: flex;

align-items: flex-end;

justify-content: space-between;

gap: 30px;

margin-bottom: 30px;


}

.section-heading h2 {

margin:
    7px 0 0;

color: var(--dark);

font-size:
    clamp(28px, 4vw, 40px);

line-height: 1.15;

letter-spacing: -1px;


}

.section-heading > p {


max-width: 430px;

margin: 0;

color: var(--text-light);

font-size: 15px;


}

.section-label {


color: var(--primary);

font-size: 11px;

font-weight: 850;

letter-spacing: 1.2px;


}

.centered {


display: block;

text-align: center;


}

.centered > p {


max-width: 600px;

margin:
    12px auto 0;


}



.featured-article {


position: relative;

overflow: hidden;

display: grid;

grid-template-columns:
    minmax(0, 1.45fr)
    minmax(250px, 0.55fr);

min-height: 390px;

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

border-radius:
    var(--radius-lg);

background: var(--white);

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


}

.featured-content {


padding:
    clamp(28px, 5vw, 52px);


}

.article-meta {


display: flex;

align-items: center;

flex-wrap: wrap;

gap: 12px;

margin-bottom: 18px;

font-size: 12px;

color: var(--text-light);


}

.category {


display: inline-flex;

align-items: center;

padding:
    5px 10px;

border-radius: 999px;

font-size: 11px;

font-weight: 800;


}

.category.security {


color: var(--security);

background:
    #eff6ff;


}

.category.comptia {


color: var(--comptia);

background:
    #f5f3ff;


}

.category.study {


color: var(--study);

background:
    #ecfdf5;


}

.category.cyber {


color: var(--cyber);

background:
    #fdf2f8;


}

.featured-content h2 {


max-width: 720px;

margin: 0;

color: var(--dark);

font-size:
    clamp(30px, 4.5vw, 50px);

line-height: 1.1;

letter-spacing: -1.5px;


}

.featured-content > p {


max-width: 680px;

margin:
    20px 0;

color: var(--text-light);

font-size: 16px;

line-height: 1.75;


}

.article-info {


margin-bottom: 24px;

color: var(--text-light);

font-size: 13px;


}

.article-button {


display: inline-flex;

align-items: center;

gap: 9px;

color: var(--primary);

font-size: 14px;

font-weight: 800;


}

.article-button i {


transition:
    transform 0.2s ease;


}

.article-button:hover i {


transform:
    translateX(4px);


}



.featured-visual {


position: relative;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

overflow: hidden;

color: var(--white);

background:

    radial-gradient(
        circle at 30% 30%,
        rgba(255,255,255,0.18),
        transparent 28%
    ),

    linear-gradient(
        145deg,
        #2563eb,
        #7c3aed
    );


}

.featured-visual::before {


content: "";

position: absolute;

width: 250px;

height: 250px;

border-radius: 50%;

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


}

.featured-visual::after {


content: "";

position: absolute;

width: 340px;

height: 340px;

border-radius: 50%;

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


}

.visual-icon {


position: relative;

z-index: 2;

width: 58px;

height: 58px;

display: grid;

place-items: center;

border-radius: 16px;

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

backdrop-filter: blur(8px);


}

.visual-icon i {
font-size: 24px;
}

.visual-number {


position: relative;

z-index: 2;

margin-top: 15px;

font-size:
    clamp(70px, 9vw, 110px);

line-height: 0.9;

font-weight: 900;

letter-spacing: -5px;


}

.visual-text {


position: relative;

z-index: 2;

margin-top: 14px;

font-size: 12px;

font-weight: 800;

letter-spacing: 2px;

opacity: 0.9;


}

/* =========================================================
9. ARTICLE GRID
========================================================= */

.article-grid {


display: grid;

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

gap: 20px;


}

.article-card {


display: flex;

flex-direction: column;

min-height: 360px;

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

border-radius:
    var(--radius-md);

background: var(--white);

overflow: hidden;

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

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


}

.article-card:hover {


transform:
    translateY(-5px);

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

border-color:
    #cbd5e1;


}

.card-icon {


width: 100%;

height: 120px;

display: grid;

place-items: center;

font-size: 32px;


}

.security-icon {


color: var(--security);

background:
    linear-gradient(
        135deg,
        #eff6ff,
        #dbeafe
    );


}

.difficulty-icon {


color: var(--accent);

background:
    linear-gradient(
        135deg,
        #f5f3ff,
        #ede9fe
    );


}

.comparison-icon {


color: #0891b2;

background:
    linear-gradient(
        135deg,
        #ecfeff,
        #cffafe
    );


}

.study-icon {


color: var(--success);

background:
    linear-gradient(
        135deg,
        #ecfdf5,
        #d1fae5
    );


}

.cybersecurity-icon {


color: var(--cyber);

background:
    linear-gradient(
        135deg,
        #fdf2f8,
        #fce7f3
    );


}

.practice-icon {


color: #d97706;

background:
    linear-gradient(
        135deg,
        #fffbeb,
        #fef3c7
    );


}

.card-content {


display: flex;

flex-direction: column;

flex: 1;

padding: 22px;


}

.card-content h3 {


margin:
    13px 0 10px;

color: var(--dark);

font-size: 19px;

line-height: 1.3;

letter-spacing: -0.3px;


}

.card-content p {


margin: 0;

color: var(--text-light);

font-size: 14px;

line-height: 1.7;
}

.card-footer {


display: flex;

align-items: center;

justify-content: space-between;

gap: 10px;

margin-top: auto;

padding-top: 20px;

border-top:
    1px solid #f1f5f9;

color: var(--text-light);

font-size: 12px;


}

.card-footer a {


display: inline-flex;

align-items: center;

gap: 6px;

color: var(--primary);

font-weight: 800;


}

.card-footer a i {


transition:
    transform 0.2s ease;


}

.card-footer a:hover i {


transform:
    translateX(3px);


}

/* =========================================================
10. RESOURCE SECTION
========================================================= */

.resource-section {


background:
    linear-gradient(
        180deg,
        #f1f5ff,
        #f8fafc
    );


}

.resource-header {


max-width: 700px;

margin:
    0 auto 35px;

text-align: center;


}

.resource-header h2 {


margin:
    8px 0 12px;

color: var(--dark);

font-size:
    clamp(30px, 4vw, 42px);

letter-spacing: -1px;


}

.resource-header p {


margin: 0;

color: var(--text-light);

font-size: 16px;


}

.resource-grid {


display: grid;

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

gap: 20px;


}

.resource-card {


display: flex;

align-items: flex-start;

gap: 20px;

padding: 28px;

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

border-radius:
    var(--radius-md);

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

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


}

.resource-icon {


flex:
    0 0 54px;

width: 54px;

height: 54px;

display: grid;

place-items: center;

border-radius: 14px;

color: var(--primary);

background:
    var(--primary-light);

font-size: 21px;


}

.resource-card h3 {


margin:
    0 0 8px;

color: var(--dark);

font-size: 19px;


}

.resource-card p {


margin:
    0 0 14px;

color: var(--text-light);

font-size: 14px;

line-height: 1.7;


}

.resource-card a {


display: inline-flex;

align-items: center;

gap: 7px;

color: var(--primary);

font-size: 13px;

font-weight: 800;


}

.resource-card a i {


transition:
    transform 0.2s ease;


}

.resource-card a:hover i {


transform:
    translateX(3px);


}

/* =========================================================
11. TOPIC CATEGORIES
========================================================= */

.categories-section {


background: var(--white);


}

.category-grid {


display: grid;

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

gap: 16px;

margin-top: 32px;


}

.topic-card {


min-height: 170px;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

text-align: center;

padding: 22px;

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

border-radius:
    var(--radius-md);

background: var(--white);

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


}

.topic-card i {


margin-bottom: 13px;

color: var(--primary);

font-size: 27px;


}

.topic-card strong {


color: var(--dark);

font-size: 16px;


}

.topic-card span {


margin-top: 4px;

color: var(--text-light);

font-size: 12px;


}

.topic-card:hover {


transform:
    translateY(-4px);

border-color:
    #bfdbfe;

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


}



.final-cta {

padding:
    85px 0;

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


}

.cta-content {


max-width: 720px;

margin: auto;

text-align: center;


}

.cta-icon {


width: 62px;

height: 62px;

display: grid;

place-items: center;

margin:
    0 auto 20px;

border-radius: 18px;

color: var(--white);

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

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


}

.cta-icon i {
font-size: 25px;
}

.cta-content h2 {


margin: 0;

color: var(--white);

font-size:
    clamp(30px, 5vw, 46px);

line-height: 1.1;

letter-spacing: -1px;


}

.cta-content p {


max-width: 600px;

margin:
    17px auto 26px;

color:
    #cbd5e1;

font-size: 16px;


}

.cta-button {


display: inline-flex;

align-items: center;

gap: 9px;

min-height: 48px;

padding:
    0 21px;

border-radius: 11px;

color: var(--dark);

background: var(--white);

font-size: 14px;

font-weight: 800;

transition:
    transform 0.2s ease;


}

.cta-button:hover {


transform:
    translateY(-2px);


}



.blog-footer {

padding-top: 60px;

background:
    #020617;

color: #94a3b8;


}

.footer-grid {


display: grid;

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

gap: 60px;

padding-bottom: 45px;


}

.footer-brand .brand-text strong {


color: var(--white);


}

.footer-brand .brand-text small {


color: #94a3b8;


}

.footer-brand p {


max-width: 360px;

margin:
    18px 0 0;

font-size: 13px;

line-height: 1.7;


}

.footer-column {


display: flex;

flex-direction: column;

gap: 9px;


}

.footer-column h3 {


margin:
    0 0 8px;

color: var(--white);

font-size: 14px;


}

.footer-column a {


width: fit-content;

color: #94a3b8;

font-size: 13px;

transition:
    color 0.2s ease;

}

.footer-column a:hover {


color: var(--white);


}

.footer-bottom {


display: flex;

align-items: center;

justify-content: space-between;

gap: 20px;

padding:
    20px 0;

border-top:
    1px solid
    rgba(255,255,255,0.08);

font-size: 12px;


}

.footer-bottom a {

color: #cbd5e1;

font-weight: 600;


}



@media (max-width: 1000px) {


.blog-navigation {
    gap: 0;
}


.blog-navigation a {
    padding:
        8px 9px;

    font-size: 13px;
}


.article-grid {

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

}


.category-grid {

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

}


}



@media (max-width: 800px) {


.header-container {

    min-height: 68px;

}


.mobile-menu-button {

    display: grid;

    place-items: center;

}


.blog-navigation {

    position: absolute;

    top: 68px;

    left: 0;

    right: 0;

    display: none;

    flex-direction: column;

    align-items: stretch;

    gap: 4px;

    padding: 12px 20px 18px;

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

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

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

}


.blog-navigation.open {

    display: flex;

}


.blog-navigation a {

    padding:
        12px 14px;

    border-radius: 9px;

}


.featured-article {

    grid-template-columns:
        1fr;

}


.featured-visual {

    min-height: 250px;

    order: -1;

}


.section-heading {

    align-items: flex-start;

    flex-direction: column;

    gap: 10px;

}


.resource-grid {

    grid-template-columns: 1fr;

}


.footer-grid {

    grid-template-columns:
        1fr 1fr;

    gap: 35px;

}


.footer-brand {

    grid-column:
        1 / -1;

}


}



@media (max-width: 600px) {


.container,
.header-container {

    width:
        min(
            calc(100% - 28px),
            var(--container)
        );

}


.learning-hero {

    padding:
        60px 0
        65px;

}


.learning-hero h1 {

    font-size:
        clamp(38px, 13vw, 54px);

    letter-spacing:
        -1.8px;

}


.hero-description {

    font-size: 16px;

}


.hero-actions {

    align-items: stretch;

    flex-direction: column;

}


.primary-button,
.secondary-button {

    width: 100%;

}


.featured-section,
.articles-section,
.resource-section,
.categories-section {

    padding:
        60px 0;

}


.featured-content {

    padding: 26px 22px;

}


.featured-content h2 {

    font-size:
        clamp(28px, 9vw, 40px);

}


.featured-content > p {

    font-size: 15px;

}


.featured-visual {

    min-height: 220px;

}


.visual-number {

    font-size: 76px;

}


.article-grid {

    grid-template-columns: 1fr;

}


.article-card {

    min-height: auto;

}


.card-icon {

    height: 105px;

}


.resource-card {

    flex-direction: column;

    padding: 23px;

}


.resource-icon {

    flex-basis: 50px;

    width: 50px;

    height: 50px;

}


.category-grid {

    grid-template-columns: 1fr 1fr;

    gap: 10px;

}


.topic-card {

    min-height: 145px;

    padding: 16px 10px;

}


.topic-card strong {

    font-size: 14px;

}


.topic-card span {

    font-size: 11px;

}


.final-cta {

    padding:
        65px 0;

}


.footer-grid {

    grid-template-columns: 1fr;

}


.footer-brand {

    grid-column:
        auto;

}


.footer-bottom {

    align-items: flex-start;

    flex-direction: column;

}


}



@media (max-width: 380px) {


.category-grid {

    grid-template-columns: 1fr;

}


.brand-text small {

    display: none;

}


.brand-icon {

    width: 39px;

    height: 39px;

}


}



:focus-visible {


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

outline-offset: 3px;


}

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


html {
    scroll-behavior: auto;
}


*,
*::before,
*::after {

    transition-duration:
        0.01ms !important;

    animation-duration:
        0.01ms !important;

    animation-iteration-count:
        1 !important;

}

}