/* ==========================================
   1. GLOBAL STYLES
========================================== */
:root{

    /* Brand Colours */

    --primary:#02353C;
    --primary-dark:#01282D;

    --secondary:#2EAF7D;

    --accent:#3FD0C9;

    --accent-light:#7DF3F0;

    --mint:#C1F6ED;

    /* Backgrounds */

    --background:#EEF8F9;

    --surface:#F8FEFE;

    --surface-alt:#EAF8F8;

    --surface-card:rgba(255,255,255,.82);

    /* Text */

    --text:#17333A;

    --text-light:#5C7379;

    /* Borders */

    --border:rgba(63,208,201,.18);

    /* Shadows */

    --shadow:
        0 20px 60px rgba(2,53,60,.08);

    --shadow-hover:
        0 30px 80px rgba(2,53,60,.14);

    /* Glow */

    --glow:
        0 0 40px rgba(63,208,201,.20);

    /* Radius */

    --radius:18px;

    /* Typography */

    --text-xs:.875rem;

    --text-sm:1rem;

    --text-base:1.125rem;

    --text-lg:1.35rem;

    --text-xl:1.75rem;

    --text-2xl:2.6rem;

    --text-3xl:3.9rem;

    /* Font Weights */

    --weight-regular:400;

    --weight-medium:500;

    --weight-semibold:600;

    --weight-bold:700;

    --weight-extrabold:800;

    /* Spacing */

    --space-xs:8px;

    --space-sm:16px;

    --space-md:24px;

    --space-lg:40px;

    --space-xl:80px;

    --space-2xl:120px;

}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body{

    font-family:'Inter',sans-serif;

    font-size:var(--text-base);

    font-weight:400;

    line-height:1.75;

    color:var(--text);

    overflow-x:hidden;

    background:

        radial-gradient(circle at 15% 12%,
        rgba(63,208,201,.22),
        transparent 26%),

        radial-gradient(circle at 88% 8%,
        rgba(46,175,125,.18),
        transparent 22%),

        radial-gradient(circle at 80% 85%,
        rgba(2,53,60,.12),
        transparent 34%),

        radial-gradient(circle at 5% 90%,
        rgba(125,243,240,.20),
        transparent 28%),

        linear-gradient(
            180deg,
            #F9FFFF,
            #EEF8F9 45%,
            #E7F5F6 100%
        );

}

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    opacity:.03;

    background-image:
        radial-gradient(#02353C 1px, transparent 1px);

    background-size:24px 24px;

    z-index:-2;

}

.container {

    width: min(1200px, calc(100% - 80px));

    margin: 0 auto;

}

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

a {
    text-decoration: none;
}

ul {
    list-style: none;
}
/* ==========================================
   2. HEADER
========================================== */

header{

    position:sticky;

    top:0;

    z-index:1000;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 80px;

    background:rgba(255,255,255,.62);

    backdrop-filter:blur(22px);

    border-bottom:1px solid rgba(63,208,201,.12);

    box-shadow:

        0 8px 40px rgba(2,53,60,.06),

        inset 0 1px rgba(255,255,255,.55);

}

.logo {
    display: flex;
    flex-direction: column;
}

.site-name{

    font-size:2.1rem;

    font-weight:800;

    color:var(--primary);

    letter-spacing:-1px;

    text-shadow:

        0 0 20px rgba(63,208,201,.18);

}

.logo p:last-child{

    margin-top:6px;

    color:var(--secondary);

    font-size:.95rem;

    letter-spacing:.08em;

    text-transform:uppercase;

}

/* ==========================================
   3. NAVIGATION
========================================== */

nav ul {
    display: flex;
    gap: 32px;
}

nav a{

    position:relative;

    display:inline-block;

    padding:12px 16px;

    border-radius:999px;

    color:var(--text);

    font-weight:600;

    transition:.35s;

}

nav a:hover{

    color:var(--primary);

    background:rgba(193,246,237,.45);

}

nav a::after{

    content:"";

    position:absolute;

    left:18px;

    right:18px;

    bottom:6px;

    height:2px;

    transform:scaleX(0);

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

    transition:.35s;

    border-radius:999px;

}

nav a:hover::after,
nav a.active::after{

    transform:scaleX(1);

}

nav a.active{

    color:var(--primary);

}

/* ==========================================
   4. BUTTONS
========================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border-radius:999px;

    font-weight:700;

    transition:.35s;

}

.btn-primary{

    position:relative;

    overflow:hidden;

    background:

        linear-gradient(

            135deg,

            var(--secondary),

            var(--accent)

        );

    color:white;

    box-shadow:

        0 15px 35px rgba(46,175,125,.28);

}

.btn-primary::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            120deg,

            transparent,

            rgba(255,255,255,.35),

            transparent

        );

    transform:translateX(-130%);

    transition:.7s;

}

.btn-primary:hover::before{

    transform:translateX(130%);

}

.btn-primary:hover{

    transform:translateY(-5px);

    box-shadow:

        0 22px 60px rgba(46,175,125,.35);

}

.btn-secondary{

    background:white;

    border:1px solid rgba(63,208,201,.35);

    color:var(--primary);

}

.btn-secondary:hover{

    background:var(--surface-alt);

    transform:translateY(-4px);

}

/* ==========================================
   5. CARD SYSTEM
========================================== */

.card{

    position:relative;

    overflow:hidden;

    background:rgba(255,255,255,.72);

    backdrop-filter:blur(18px);

    border:1px solid rgba(63,208,201,.16);

    border-radius:22px;

    padding:36px;

    transition:.45s;

    box-shadow:

        0 18px 45px rgba(2,53,60,.08);

}

.card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            135deg,

            rgba(255,255,255,.30),

            transparent 45%

        );

    pointer-events:none;

}

.card:hover{

    transform:

        translateY(-10px);

    border-color:

        rgba(63,208,201,.40);

    box-shadow:

        0 30px 70px rgba(2,53,60,.12),

        0 0 40px rgba(63,208,201,.12);

}

/* ==========================================
   4. HERO SECTION
========================================== */

.hero{

    position:relative;

    overflow:hidden;

    max-width:1200px;

    margin:var(--space-2xl) auto;

    padding:80px;

    border-radius:36px;

    background:

        radial-gradient(circle at top right,

            rgba(63,208,201,.26),

            transparent 28%),

        radial-gradient(circle at bottom left,

            rgba(46,175,125,.18),

            transparent 34%),

        linear-gradient(

            145deg,

            rgba(255,255,255,.95),

            rgba(247,255,255,.88)

        );

    backdrop-filter:blur(22px);

    border:1px solid rgba(63,208,201,.18);

    box-shadow:

        0 40px 90px rgba(2,53,60,.10);

}

.hero::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    right:-170px;

    top:-170px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(63,208,201,.22),

            transparent 72%

        );

    animation:floatGlow 9s ease-in-out infinite;

}

.hero::after{

    content:"";

    position:absolute;

    width:340px;

    height:340px;

    left:-120px;

    bottom:-120px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(46,175,125,.14),

            transparent 70%

        );

}

.hero h1{

    max-width:760px;

    font-size:4.2rem;

    line-height:1.03;

    font-weight:800;

    letter-spacing:-2.5px;

    color:var(--primary);

    text-shadow:

        0 0 30px rgba(63,208,201,.12);

}

.hero h1 span{

    background:

        linear-gradient(

            90deg,

            var(--secondary),

            var(--accent)

        );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.hero p {

    max-width: 760px;

    margin-top: var(--space-md);

    font-size: var(--text-base);

    color: var(--text-light);
}

.hero-buttons {

    display: flex;

    gap: var(--space-md);

    margin-top: var(--space-lg);

    flex-wrap: wrap;
}

/* ==========================================
REUSABLE SECTION HEADER
========================================== */

.section-header{

    max-width:760px;

    margin:0 auto 80px;

    text-align:center;

}

.section-label{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 22px;

    margin-bottom:24px;

    border-radius:999px;

    background:rgba(255,255,255,.72);

    backdrop-filter:blur(16px);

    border:1px solid rgba(63,208,201,.22);

    color:var(--secondary);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.14em;

    text-transform:uppercase;

    box-shadow:

        0 10px 30px rgba(63,208,201,.10);

}

.section-header h2{

    font-size:var(--text-2xl);

    font-weight:800;

    color:var(--primary);

    letter-spacing:-1.5px;

    margin-bottom:22px;

    text-shadow:

        0 0 25px rgba(63,208,201,.10);

}

.section-header p{

    font-size:1.18rem;

    color:var(--text-light);

    line-height:1.9;

}

/* ==========================================
   5. CATEGORY PREVIEW
========================================== */

.categories-preview {
   margin-bottom: var(--space-2xl);
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.category-card{

    background:rgba(255,255,255,.78);

    backdrop-filter:blur(18px);

    border:1px solid rgba(63,208,201,.18);

    border-radius:22px;

    transition:.4s;

}

.category-card:hover{

    transform:

        translateY(-10px)

        rotate(-.5deg);

    border-color:var(--accent);

    box-shadow:

        0 25px 60px rgba(63,208,201,.18);

}

.category-card h3{

    color:var(--primary);

    margin-bottom:18px;

    font-size:1.45rem;

}

.category-card p{

    color:var(--text-light);

    line-height:1.8;

}

/* ==========================================
TRUST PILLS
========================================== */

.trust-points{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin-top:60px;

}

.trust-item{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    gap:10px;

    padding:15px 24px;

    border-radius:999px;

    background:

        rgba(255,255,255,.72);

    backdrop-filter:blur(18px);

    border:1px solid rgba(63,208,201,.20);

    box-shadow:

        0 10px 30px rgba(2,53,60,.05);

    transition:.4s;

}

.trust-item::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            120deg,

            transparent,

            rgba(255,255,255,.35),

            transparent

        );

    transform:translateX(-130%);

    transition:.8s;

}

.trust-item:hover::before{

    transform:translateX(130%);

}

.trust-item:hover{

    transform:

        translateY(-5px)

        scale(1.03);

    border-color:var(--accent);

    box-shadow:

        0 18px 45px rgba(63,208,201,.18);

}

/* Featured Articles */

.featured-articles{

    padding:90px 10%;

    background:white;

}

.article-grid{

    display:grid;

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

    gap:30px;

}

.article-card{

    background:rgba(255,255,255,.80);

    backdrop-filter:blur(20px);

    border-radius:22px;

    border:1px solid rgba(63,208,201,.18);

    transition:.4s;

}

.article-card:hover{

    transform:

        translateY(-10px);

    border-color:var(--accent);

    box-shadow:

        0 28px 70px rgba(63,208,201,.16);

}

.article-category{

    background:

        linear-gradient(

            135deg,

            var(--mint),

            white

        );

    color:var(--primary);

}

.article-card h3{

    color:#0B3B6E;

    margin-bottom:18px;

}

.article-card p{

    color:#5f6b7a;

    line-height:1.8;

    margin-bottom:25px;

}

.article-card a{

    text-decoration:none;

    font-weight:700;

    color:#0B3B6E;

}

/* ==========================================
FOOTER
========================================== */

footer{

    position:relative;

    overflow:hidden;

    margin-top:140px;

    padding:0;

    background:

        linear-gradient(

            180deg,

            #01282D,

            #011D21

        );

}

footer::before{

    content:"";

    position:absolute;

    top:-220px;

    left:50%;

    transform:translateX(-50%);

    width:700px;

    height:700px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(63,208,201,.18),

            transparent 70%

        );

}

.footer-content{

    position:relative;

    max-width:1200px;

    margin:auto;

    padding:100px 40px 80px;

    text-align:center;

}

.footer-content h2{

    color:white;

    font-size:2.4rem;

    margin-bottom:24px;

    text-shadow:

        0 0 25px rgba(63,208,201,.22);

}

.footer-content p{

    max-width:760px;

    margin:0 auto 24px;

    color:rgba(255,255,255,.75);

    line-height:1.9;

}

.copyright{

    margin-top:45px;

    color:rgba(255,255,255,.45);

    font-size:.92rem;

}

/* ===========================
   Why Trust Section
=========================== */

.why-trust {
    padding: 100px 10%;
    background: #ffffff;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
}

.trust-grid article{

    background:rgba(255,255,255,.78);

    backdrop-filter:blur(18px);

    border-radius:22px;

    border:1px solid rgba(63,208,201,.18);

    transition:.4s;

}

.trust-grid article:hover{

    transform:translateY(-8px);

    border-color:var(--accent);

    box-shadow:

        0 25px 60px rgba(63,208,201,.14);

}

.trust-grid h3{

    color:var(--primary);

    margin-bottom:18px;

}

.trust-grid p{

    color:var(--text-light);

}

/* ===========================
   Featured Software Reviews
=========================== */

.featured-software {
    padding: 100px 10%;
    background: #F8FAFC;
}
   
.software-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.software-card{

    background:rgba(255,255,255,.80);

    backdrop-filter:blur(20px);

    border:1px solid rgba(63,208,201,.18);

    border-radius:22px;

    transition:.4s;

}

.software-card:hover{

    transform:

        translateY(-10px);

    border-color:var(--accent);

    box-shadow:

        0 28px 70px rgba(63,208,201,.18);

}

.software-type{

    background:

        linear-gradient(

            135deg,

            var(--secondary),

            var(--accent)

        );

    color:white;

    font-weight:700;

}

.software-card h3 {
    color: #0B3B6E;
    margin-bottom: 15px;
    font-size: 1.6rem;
}

.software-card p {
    color: #555;
    line-height: 1.8;
    margin-bottom: 25px;
}

.software-card a {
    color: #0B3B6E;
    font-weight: 700;
    text-decoration: none;
}

.software-card a:hover {
    text-decoration: underline;
}

/* ==========================================
   UNDERSTANDING PANEL
========================================== */

.understanding-panel{
    padding:100px 0;
}

.understanding-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.understanding-step{

    position:relative;

    overflow:hidden;

    background:rgba(255,255,255,.78);

    backdrop-filter:blur(18px);

    border:1px solid rgba(63,208,201,.18);

    border-radius:22px;

    transition:.4s;

}

.understanding-step::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:

        linear-gradient(

            90deg,

            var(--secondary),

            var(--accent)

        );

}

.understanding-step:hover{

    transform:

        translateY(-10px);

    box-shadow:

        0 30px 70px rgba(63,208,201,.15);

}

.step-number{

    font-size:3rem;

    font-weight:800;

    color:transparent;

    background:

        linear-gradient(

            135deg,

            var(--secondary),

            var(--accent)

        );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    margin-bottom:18px;

}

.understanding-step h3{
    color:var(--primary);
    margin-bottom:16px;
}

.understanding-step p{
    color:var(--text-light);
    line-height:1.8;
}

/* ==========================================
   PAGE HERO
========================================== */

.page-hero{

    text-align:center;

}

.page-hero h1{

    margin-left:auto;

    margin-right:auto;

}

.page-hero p{

    max-width:700px;

    margin:32px auto 0;

}

@keyframes floatGlow{

    0%{

        transform:
            translateY(0px);

    }

    50%{

        transform:
            translateY(25px);

    }

    100%{

        transform:
            translateY(0px);

    }

}

/* ==========================================
LINK ANIMATION
========================================== */

.article-card a,

.software-card a{

    position:relative;

    display:inline-flex;

    align-items:center;

    gap:8px;

    transition:.35s;

}

.article-card a:hover,

.software-card a:hover{

    color:var(--secondary);

    transform:translateX(6px);

}

/* ==========================================
GLOBAL TRANSITIONS
========================================== */

a,

button,

.card,

.btn,

.trust-item,

.category-card,

.software-card,

.article-card,

.understanding-step{

    transition:

        .35s ease;

}

/* ==========================================
SCROLLBAR
========================================== */

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#EAF8F8;

}

::-webkit-scrollbar-thumb{

    background:

        linear-gradient(

            var(--secondary),

            var(--accent)

        );

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:

        linear-gradient(

            var(--primary),

            var(--secondary)

        );

}

/* ==========================================
TEXT SELECTION
========================================== */

::selection{

    background:

        rgba(63,208,201,.35);

    color:var(--primary);

}

/* ==========================================
ANIMATIONS
========================================== */

@keyframes floatSlow{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0px);

    }

}

@keyframes pulseGlow{

    0%{

        box-shadow:

            0 0 0 rgba(63,208,201,0);

    }

    50%{

        box-shadow:

            0 0 30px rgba(63,208,201,.20);

    }

    100%{

        box-shadow:

            0 0 0 rgba(63,208,201,0);

    }

}

/* ==========================================
PHASE 3A
AMBIENT LIGHTING SYSTEM
========================================== */

body::after{

content:"";

position:fixed;

inset:0;

pointer-events:none;

z-index:-1;

background:

radial-gradient(
circle at 18% 25%,
rgba(63,208,201,.10),
transparent 24%
),

radial-gradient(
circle at 82% 18%,
rgba(46,175,125,.10),
transparent 22%
),

radial-gradient(
circle at 65% 75%,
rgba(2,53,60,.08),
transparent 30%
);

animation:
ambientShift 18s ease-in-out infinite;

}

/* ==========================================
SOFT SECTION LIGHTING
========================================== */

section{

position:relative;

}

section::before{

content:"";

position:absolute;

left:50%;

top:-180px;

transform:translateX(-50%);

width:700px;

height:300px;

background:

radial-gradient(

rgba(63,208,201,.08),

transparent 70%

);

pointer-events:none;

z-index:-1;

}

.hero::before{

animation:

heroOrb 12s ease-in-out infinite;

}

.hero::after{

animation:

heroOrbReverse 16s ease-in-out infinite;

}

.hero .grid-overlay{

position:absolute;

inset:0;

pointer-events:none;

opacity:.05;

background-image:

linear-gradient(

rgba(2,53,60,.4) 1px,

transparent 1px

),

linear-gradient(

90deg,

rgba(2,53,60,.4) 1px,

transparent 1px

);

background-size:50px 50px;

mask-image:

radial-gradient(

circle,

black,

transparent 85%

);

}

.card::after{

content:"";

position:absolute;

top:-120%;

left:-50%;

width:40%;

height:300%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.22),

transparent

);

transform:rotate(25deg);

transition:.8s;

pointer-events:none;

}

.card:hover::after{

left:120%;

}

.btn-primary{

animation:

buttonGlow 5s ease-in-out infinite;

}

.category-card{

transform-style:preserve-3d;

}

.category-card:hover{

transform:

translateY(-12px)

rotateX(5deg)

rotateY(-4deg);

}

.software-card{

position:relative;

overflow:hidden;

}

.software-card::before{

content:"";

position:absolute;

top:-120px;

right:-120px;

width:220px;

height:220px;

background:

radial-gradient(

rgba(63,208,201,.15),

transparent 70%

);

border-radius:50%;

pointer-events:none;

}

.article-card{

position:relative;

overflow:hidden;

}

.article-card::before{

content:"";

position:absolute;

bottom:-100px;

left:-100px;

width:200px;

height:200px;

border-radius:50%;

background:

radial-gradient(

rgba(46,175,125,.12),

transparent 72%

);

pointer-events:none;

}

.understanding-step{

animation:

floatSlow 7s ease-in-out infinite;

}

.understanding-step:nth-child(2){

animation-delay:1s;

}

.understanding-step:nth-child(3){

animation-delay:2s;

}

.understanding-step:nth-child(4){

animation-delay:3s;

}

.trust-item{

animation:

pulseGlow 8s ease-in-out infinite;

}

@keyframes ambientShift{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-30px);

}

100%{

transform:translateY(0);

}

}



@keyframes heroOrb{

0%{

transform:translate(0,0);

}

50%{

transform:translate(-40px,30px);

}

100%{

transform:translate(0,0);

}

}



@keyframes heroOrbReverse{

0%{

transform:translate(0,0);

}

50%{

transform:translate(40px,-25px);

}

100%{

transform:translate(0,0);

}

}



@keyframes buttonGlow{

0%{

box-shadow:

0 15px 35px rgba(46,175,125,.28);

}

50%{

box-shadow:

0 22px 65px rgba(63,208,201,.42);

}

100%{

box-shadow:

0 15px 35px rgba(46,175,125,.28);

}

}

/* ==========================================
PHASE 3B
PREMIUM DEPTH SYSTEM
========================================== */

/* Floating Header */

header{

    transition:
        background .45s,
        box-shadow .45s,
        transform .45s;

}

header:hover{

    transform:translateY(2px);

    box-shadow:
        0 18px 45px rgba(2,53,60,.12);

}


/* ==========================================

PREMIUM HERO PANEL

========================================== */

.hero{

    isolation:isolate;

}

.hero::before{

    filter:blur(10px);

}

.hero::after{

    filter:blur(12px);

}


/* ==========================================

SECTION DEPTH

========================================== */

section{

    padding-top:120px;

    padding-bottom:120px;

}

section:nth-child(even){

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.28),

            rgba(255,255,255,0)

        );

}


/* ==========================================

LUXURY CARD DEPTH

========================================== */

.card,

.category-card,

.software-card,

.article-card,

.understanding-step,

.trust-grid article{

    overflow:hidden;

}

.card::after,

.category-card::after,

.software-card::after,

.article-card::after,

.understanding-step::after,

.trust-grid article::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:

        linear-gradient(

            135deg,

            rgba(255,255,255,.22),

            transparent 40%,

            transparent

        );

    pointer-events:none;

}


/* ==========================================

GLASS EDGE

========================================== */

.card,

.category-card,

.software-card,

.article-card{

    outline:

        1px solid rgba(255,255,255,.35);

}


/* ==========================================

SECTION TITLE GLOW

========================================== */

.section-header h2{

    position:relative;

}

.section-header h2::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-18px;

    transform:translateX(-50%);

    width:90px;

    height:4px;

    border-radius:999px;

    background:

        linear-gradient(

            90deg,

            var(--secondary),

            var(--accent)

        );

}


/* ==========================================

PREMIUM BUTTON DEPTH

========================================== */

.btn{

    transform-style:preserve-3d;

}

.btn:hover{

    transform:

        translateY(-5px)

        scale(1.02);

}


/* ==========================================

SOFTWARE CARD ICON AREA

========================================== */

.software-type{

    box-shadow:

        0 10px 25px rgba(63,208,201,.22);

}


/* ==========================================

ARTICLE CATEGORY

========================================== */

.article-category{

    box-shadow:

        0 8px 18px rgba(63,208,201,.14);

}


/* ==========================================

TRUST ITEMS

========================================== */

.trust-item{

    backdrop-filter:blur(24px);

}

.trust-item:hover{

    transform:

        translateY(-6px)

        scale(1.05);

}


/* ==========================================

FOOTER

========================================== */

footer::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            transparent,

            rgba(255,255,255,.03)

        );

    pointer-events:none;

}


/* ==========================================

PAGE HERO

========================================== */

.page-hero{

    position:relative;

}

.page-hero::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    left:50%;

    top:-260px;

    transform:translateX(-50%);

    border-radius:50%;

    background:

        radial-gradient(

            rgba(63,208,201,.14),

            transparent 70%

        );

    pointer-events:none;

}


/* ==========================================

GLOBAL IMAGE POLISH

========================================== */

img{

    transition:

        transform .45s,

        filter .45s;

}

img:hover{

    transform:scale(1.02);

    filter:saturate(108%);

}

/* ==========================================
PHASE 3C
PREMIUM GLASSMORPHISM SYSTEM
========================================== */

/* Premium Glass Cards */

.card,
.category-card,
.article-card,
.software-card,
.understanding-step,
.trust-grid article{

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.78),
            rgba(255,255,255,.55)
        );

    backdrop-filter:
        blur(26px)
        saturate(180%);

    -webkit-backdrop-filter:
        blur(26px)
        saturate(180%);

}


/* ==========================================

LUXURY BORDER LIGHT

========================================== */

.card::before,
.category-card::before,
.article-card::before,
.software-card::before,
.understanding-step::before{

    opacity:.95;

}


/* ==========================================

FLOATING HIGHLIGHT

========================================== */

.card:hover,
.category-card:hover,
.article-card:hover,
.software-card:hover,
.understanding-step:hover{

    box-shadow:

        0 35px 90px rgba(2,53,60,.12),

        0 0 45px rgba(63,208,201,.18),

        inset 0 1px rgba(255,255,255,.55);

}


/* ==========================================

PREMIUM HERO LIGHT

========================================== */

.hero{

    overflow:hidden;

}

.hero::before{

    opacity:.85;

}

.hero::after{

    opacity:.75;

}


/* ==========================================

SOFT FLOATING PARTICLES

========================================== */

.hero .grid-overlay::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

        radial-gradient(
            rgba(255,255,255,.55) 1px,
            transparent 1px
        );

    background-size:80px 80px;

    opacity:.18;

}


/* ==========================================

BUTTON DEPTH

========================================== */

.btn-primary{

    border:

        1px solid rgba(255,255,255,.18);

}

.btn-primary:hover{

    transform:

        translateY(-6px)

        scale(1.03);

}


/* ==========================================

PREMIUM NAVIGATION

========================================== */

nav a{

    overflow:hidden;

}

nav a::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            120deg,

            transparent,

            rgba(255,255,255,.45),

            transparent

        );

    transform:translateX(-130%);

    transition:.8s;

}

nav a:hover::before{

    transform:translateX(130%);

}


/* ==========================================

CATEGORY ICON GLOW

========================================== */

.category-card h3{

    position:relative;

}

.category-card h3::after{

    content:"";

    display:block;

    width:42px;

    height:3px;

    margin-top:14px;

    border-radius:999px;

    background:

        linear-gradient(

            90deg,

            var(--secondary),

            var(--accent)

        );

}


/* ==========================================

SOFTWARE CARD SHIMMER

========================================== */

.software-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            120deg,

            transparent,

            rgba(255,255,255,.18),

            transparent

        );

    transform:translateX(-150%);

    transition:1s;

}

.software-card:hover::after{

    transform:translateX(150%);

}


/* ==========================================

ARTICLE IMAGE EFFECT

========================================== */

.article-card{

    isolation:isolate;

}

.article-card:hover{

    transform:

        translateY(-12px)

        scale(1.01);

}


/* ==========================================

UNDERSTANDING PANEL

========================================== */

.understanding-step{

    position:relative;

}

.understanding-step:hover{

    border-color:

        rgba(63,208,201,.45);

}


/* ==========================================

TRUST GRID

========================================== */

.trust-grid article:hover{

    transform:

        translateY(-10px)

        rotate(-.3deg);

}


/* ==========================================

SECTION LABEL

========================================== */

.section-label{

    position:relative;

    overflow:hidden;

}

.section-label::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            120deg,

            transparent,

            rgba(255,255,255,.45),

            transparent

        );

    transform:translateX(-130%);

    transition:1s;

}

.section-label:hover::before{

    transform:translateX(130%);

}


/* ==========================================

FOOTER GLOW

========================================== */

.footer-content{

    position:relative;

}

.footer-content::before{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    left:50%;

    top:-160px;

    transform:translateX(-50%);

    border-radius:50%;

    background:

        radial-gradient(

            rgba(63,208,201,.12),

            transparent 70%

        );

    pointer-events:none;

}


/* ==========================================

IMAGE PREMIUM QUALITY

========================================== */

img{

    image-rendering:auto;

    backface-visibility:hidden;

}


/* ==========================================

SMOOTH RENDERING

========================================== */

body{

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}

/* ==========================================
PHASE 4A
MOTION DESIGN SYSTEM
========================================== */

/* Smooth GPU Rendering */

*{

    transform-style:preserve-3d;

}


/* ==========================================

GLOBAL SECTION FADE

========================================== */

section{

    transition:

        transform .6s ease,

        opacity .6s ease;

}


/* ==========================================

CARD FLOAT

========================================== */

.card,
.category-card,
.article-card,
.software-card,
.understanding-step,
.trust-grid article{

    will-change:
        transform,
        box-shadow;

}


/* ==========================================
PREMIUM HOVER LIFT
========================================== */

.card:hover{

    transform:
        translateY(-14px)
        scale(1.015);

}

/* ==========================================

BUTTON SPRING

========================================== */

.btn{

    transition:

        transform .25s cubic-bezier(.22,1,.36,1),

        box-shadow .3s ease,

        background .3s ease;

}

.btn:active{

    transform:

        scale(.96);

}


/* ==========================================

NAVIGATION SPRING

========================================== */

nav a{

    transition:

        transform .25s ease,

        color .25s ease,

        background .25s ease;

}

nav a:hover{

    transform:

        translateY(-2px);

}


/* ==========================================

LOGO MOTION

========================================== */

.logo{

    transition:

        transform .35s ease;

}

.logo:hover{

    transform:

        scale(1.04);

}


/* ==========================================

HERO CONTENT

========================================== */

.hero h1{

    animation:

        heroFloat 10s ease-in-out infinite;

}

.hero p{

    animation:

        heroFloatReverse 12s ease-in-out infinite;

}


/* ==========================================

TRUST PILLS

========================================== */

.trust-item{

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.trust-item:hover{

    transform:

        translateY(-6px)

        scale(1.05);

}


/* ==========================================

CATEGORY TILT

========================================== */

.category-card{

    perspective:1200px;

}

.category-card:hover{

    transform:

        rotateX(5deg)

        rotateY(-5deg)

        translateY(-12px);

}


/* ==========================================

ARTICLE DEPTH

========================================== */

.article-card{

    perspective:1200px;

}

.article-card:hover{

    transform:

        translateY(-12px)

        rotateX(3deg);

}


/* ==========================================

SOFTWARE CARD

========================================== */

.software-card:hover{

    transform:

        translateY(-14px)

        rotateY(-3deg);

}


/* ==========================================

UNDERSTANDING STEPS

========================================== */

.understanding-step{

    transition:

        transform .45s ease,

        box-shadow .45s ease;

}


/* ==========================================

FOOTER

========================================== */

footer{

    transition:

        background .8s ease;

}


/* ==========================================

KEYFRAMES

========================================== */

@keyframes heroFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes heroFloatReverse{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(8px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ==========================================
PHASE 4B
SCROLL REVEAL FOUNDATION
========================================== */

/* ------------------------------------------
Fade Up
------------------------------------------ */

.reveal{

    opacity:0;

    transform:
        translateY(60px);

    transition:

        opacity .9s ease,

        transform .9s cubic-bezier(.22,1,.36,1);

}

.reveal.visible{

    opacity:1;

    transform:
        translateY(0);

}


/* ------------------------------------------
Fade Left
------------------------------------------ */

.reveal-left{

    opacity:0;

    transform:
        translateX(-70px);

    transition:

        opacity .9s ease,

        transform .9s cubic-bezier(.22,1,.36,1);

}

.reveal-left.visible{

    opacity:1;

    transform:translateX(0);

}


/* ------------------------------------------
Fade Right
------------------------------------------ */

.reveal-right{

    opacity:0;

    transform:
        translateX(70px);

    transition:

        opacity .9s ease,

        transform .9s cubic-bezier(.22,1,.36,1);

}

.reveal-right.visible{

    opacity:1;

    transform:translateX(0);

}


/* ==========================================
STAGGER SYSTEM
========================================== */

.stagger>*{

    opacity:0;

    transform:
        translateY(40px);

    transition:

        transform .8s cubic-bezier(.22,1,.36,1),

        opacity .8s ease;

}

.stagger.visible>*{

    opacity:1;

    transform:translateY(0);

}

.stagger.visible>*:nth-child(1){

    transition-delay:.08s;

}

.stagger.visible>*:nth-child(2){

    transition-delay:.16s;

}

.stagger.visible>*:nth-child(3){

    transition-delay:.24s;

}

.stagger.visible>*:nth-child(4){

    transition-delay:.32s;

}

.stagger.visible>*:nth-child(5){

    transition-delay:.40s;

}

.stagger.visible>*:nth-child(6){

    transition-delay:.48s;

}


/* ==========================================
SECTION TRANSITION
========================================== */

section{

    transition:

        transform .7s ease,

        opacity .7s ease;

}


/* ==========================================
PREMIUM IMAGE HOVER
========================================== */

img{

    transition:

        transform .8s ease,

        filter .6s ease;

}

.card:hover img,

.article-card:hover img,

.software-card:hover img{

    transform:scale(1.04);

    filter:saturate(108%);

}


/* ==========================================
HERO TEXT ENTRANCE
========================================== */

.hero h1{

    animation:

        heroEntrance 1.2s ease both,

        heroFloat 10s ease-in-out infinite;

}

.hero p{

    animation:

        heroParagraph 1.5s ease both,

        heroFloatReverse 12s ease-in-out infinite;

}

.hero-buttons{

    animation:

        heroButtons 1.8s ease both;

}


/* ==========================================
KEYFRAMES
========================================== */

@keyframes heroEntrance{

    from{

        opacity:0;

        transform:

            translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes heroParagraph{

    from{

        opacity:0;

        transform:

            translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes heroButtons{

    from{

        opacity:0;

        transform:

            translateY(24px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================
   CONTACT FORM
========================================== */

.contact-form-wrapper {
    width: min(760px, 100%);
    margin: 50px auto 0;
    padding: 45px;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--primary);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 15px 17px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: white;
    color: var(--text);
    font-family: inherit;
    font-size: var(--text-base);
    line-height: 1.5;
    box-sizing: border-box;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.form-group input {
    min-height: 54px;
}

.form-group textarea {
    min-height: 180px;
    resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-light);
    opacity: 0.75;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(45, 200, 175, 0.12);
}

.contact-form .btn {
    align-self: flex-start;
    border: none;
    cursor: pointer;
    margin-top: 5px;
}


/* ==========================================
   CONTACT FORM — MOBILE
========================================== */

@media (max-width: 768px) {

    .contact-form-wrapper {
        padding: 30px 22px;
        margin-top: 35px;
    }

    .contact-form {
        gap: 20px;
    }

    .form-group input,
    .form-group textarea {
        font-size: 16px;
    }

    .contact-form .btn {
        width: 100%;
    }

}

/* ==========================================
   PHASE 4C
   MOBILE RESPONSIVE SYSTEM
========================================== */

@media (max-width: 900px){

    /* ---------- HEADER ---------- */

    header{

        padding:18px 30px;

        flex-direction:column;

        gap:18px;

    }

    .site-name{

        font-size:1.8rem;

        text-align:center;

    }

    .logo p:last-child{

        text-align:center;

    }

    nav ul{

        justify-content:center;

        flex-wrap:wrap;

        gap:8px;

    }

    nav a{

        padding:9px 12px;

        font-size:.9rem;

    }


    /* ---------- CONTAINER ---------- */

    .container{

        width:min(100% - 40px, 1200px);

    }


    /* ---------- HERO ---------- */

    .hero{

        margin:40px 20px;

        padding:60px 40px;

    }

    .hero h1{

        font-size:3.2rem;

    }


    /* ---------- GRIDS ---------- */

    .category-grid{

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

    }

    .article-grid{

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

    }

    .software-grid{

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

    }

}


@media (max-width: 600px){

    /* ---------- GLOBAL ---------- */

    .container{

        width:calc(100% - 32px);

    }

    section{

        padding-top:70px;

        padding-bottom:70px;

    }


    /* ---------- HEADER ---------- */

    header{

        padding:16px;

        gap:14px;

    }

    .site-name{

        font-size:1.55rem;

        letter-spacing:-.5px;

    }

    .logo p:last-child{

        font-size:.72rem;

        letter-spacing:.06em;

    }

    nav ul{

        gap:5px;

    }

    nav a{

        padding:8px 9px;

        font-size:.78rem;

    }


    /* ---------- HERO ---------- */

    .hero{

        margin:24px 16px;

        padding:48px 24px;

        border-radius:26px;

    }

    .hero h1{

        font-size:2.35rem;

        line-height:1.08;

        letter-spacing:-1.5px;

    }

    .hero p{

        font-size:1rem;

        line-height:1.75;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:stretch;

    }

    .btn{

        width:100%;

    }


    /* ---------- TRUST POINTS ---------- */

    .trust-points{

        flex-direction:column;

        gap:12px;

        margin-top:40px;

    }

    .trust-item{

        justify-content:center;

        width:100%;

        padding:13px 18px;

    }


    /* ---------- SECTION HEADERS ---------- */

    .section-header{

        margin-bottom:50px;

    }

    .section-header h2{

        font-size:2rem;

        letter-spacing:-1px;

    }

    .section-header p{

        font-size:1rem;

        line-height:1.75;

    }


    /* ---------- ALL GRIDS BECOME SINGLE COLUMN ---------- */

    .category-grid,

    .article-grid,

    .software-grid,

    .understanding-grid,

    .trust-grid{

        grid-template-columns:1fr;

    }


    /* ---------- CARDS ---------- */

    .card,

    .category-card,

    .article-card,

    .software-card,

    .understanding-step,

    .trust-grid article{

        width:100%;

        min-width:0;

    }


    /* ---------- FEATURED SECTIONS ---------- */

    .featured-articles,

    .featured-software,

    .why-trust{

        padding-left:16px;

        padding-right:16px;

    }


    /* ---------- PAGE HERO ---------- */

    .page-hero{

        margin-left:16px;

        margin-right:16px;

    }

    .page-hero h1{

        font-size:2.35rem;

    }


    /* ---------- FOOTER ---------- */

    .footer-content{

        padding:70px 24px 60px;

    }

    .footer-content h2{

        font-size:2rem;

    }

    .footer-content p{

        font-size:.95rem;

    }


    /* ---------- CONTACT FORM ---------- */

    .contact-form,

    .contact-form input,

    .contact-form textarea,

    .contact-form select{

        width:100%;

        max-width:100%;

        min-width:0;

    }


    /* ---------- PREVENT OVERSIZED DECORATIVE ELEMENTS ---------- */

    .page-hero::before{

        width:320px;

        height:320px;

        top:-160px;

    }

}

/* ==========================================
   PHASE 4C
   REDUCED MOTION ACCESSIBILITY
========================================== */

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

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

        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
        scroll-behavior:auto !important;

    }

}