@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{
    --primary:#111111;
    --secondary:#555555;
    --accent:#000000;
    --bg:#ffffff;
    --card:#fafafa;
    --border:#eaeaea;
}

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

body{
    font-family:'Poppins',sans-serif;
    background:#fff;
    color:#000;
    line-height:1.9;
    overflow-x:hidden;
}

/* Animated Background */

body::before{
    content:'';
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:
    radial-gradient(circle at 20% 20%,rgba(0,0,0,.04),transparent 20%),
    radial-gradient(circle at 80% 80%,rgba(0,0,0,.04),transparent 20%);
    z-index:-2;
}

/* Floating Shapes */

body::after{
    content:'';
    position:fixed;
    width:500px;
    height:500px;
    background:rgba(0,0,0,.03);
    border-radius:50%;
    top:-200px;
    right:-100px;
    animation:float 12s infinite ease-in-out;
    z-index:-1;
}

@keyframes float{
    0%,100%{
        transform:translateY(0px);
    }
    50%{
        transform:translateY(40px);
    }
}

/* BLOG HEADER FIX */

article > header{
    min-height:auto !important;
    max-width:1100px;
    margin:0 auto;
    padding:30px 20px 20px;
    text-align:center;
}

article > header h1{
    font-size:clamp(2.2rem,4vw,4rem);
    line-height:1.1;
    margin-bottom:25px;
    animation:slideUp 1s ease;
}

article > header p{
    max-width:750px;
    margin:auto;
    animation:slideUp 1.3s ease;
}
@keyframes slideUp{
    from{
        opacity:0;
        transform:translateY(80px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}


article{
    max-width:1100px;
    margin:auto;
    padding:50px 30px;
}

section{
    margin:90px 0;
}



h2{
    font-size:2.3rem;
    font-weight:700;
    margin-bottom:30px;
    position:relative;
}

h2::after{
    content:'';
    position:absolute;
    width:70px;
    height:4px;
    background:#000;
    bottom:-12px;
    left:0;
}

h3{
    font-size:1.5rem;
    margin-bottom:20px;
    margin-top:40px;
}


.hidden{
    opacity:0;
    transform:translateY(70px);
    transition:all .9s ease;
}

.show{
    opacity:1;
    transform:translateY(0);
}


.highlight-box{
    background:#f7f7f7;
    border-left:5px solid #000;
    padding:25px;
    margin:35px 0;
    border-radius:12px;
    font-weight:500;
}




section section{
    background:white;
    padding:35px;
    border-radius:24px;
    border:1px solid #eee;
    margin-bottom:30px;
    transition:.4s;
}

section section:hover{
    transform:translateY(-10px);
    box-shadow:
    0 25px 60px rgba(0,0,0,.08);
}


table{
    width:100%;
    border-collapse:collapse;
    overflow:hidden;
    border-radius:20px;
    margin-top:40px;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
}

thead{
    background:#000;
    color:white;
}

th{
    padding:22px;
    text-align:left;
}

td{
    padding:22px;
}

tbody tr:nth-child(even){
    background:#fafafa;
}

tbody tr{
    transition:.3s;
}

tbody tr:hover{
    background:#f1f1f1;
}




.flow-diagram{
display:flex;
justify-content:center;
align-items:center;
gap:20px;
flex-wrap:wrap;
margin:70px 0;
}

.flow-item{
padding:18px 30px;
background:#000;
color:white;
border-radius:50px;
font-weight:600;
transition:.4s;
}

.flow-item:hover{
transform:scale(1.08);
}

.arrow{
font-size:2rem;
font-weight:700;
}


.cta{
background:#000;
color:white;
padding:80px;
border-radius:30px;
text-align:center;
margin-top:120px;
}

.cta h2{
color:white;
}

.cta h2::after{
background:white;
left:50%;
transform:translateX(-50%);
}

.cta-btn{
display:inline-block;
margin-top:25px;
padding:18px 35px;
background:white;
color:black;
font-weight:600;
border-radius:50px;
text-decoration:none;
transition:.3s;
}

.cta-btn:hover{
transform:translateY(-5px);
}



figure img{
width:100%;
max-width:850px;
height:auto;
border-radius:20px;

margin-top:50px;
box-shadow:
0 30px 80px rgba(0,0,0,.15);

animation:
floatImage 6s ease-in-out infinite;
}

@keyframes floatImage{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-15px);
}
}




#progressBar{
position:fixed;
top:0;
left:0;
height:5px;
background:black;
width:0%;
z-index:9999;
}


/* EMERGENCY WORDPRESS HEADER RESET */

body > header,
.site-header,
#header,
.header,
.main-header,
.et_header_style_left,
.et-l--header{
    min-height:auto !important;
    height:auto !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
}


/* ==================================
   PROFESSIONAL FLOW SECTION
================================== */

.process-section{

    max-width:1400px;

    margin:120px auto;

    padding:90px 40px;

    background:linear-gradient(
        135deg,
        #071d49,
        #0c2d69
    );

    border-radius:35px;

    overflow:hidden;

    position:relative;
}

.process-section::before{

    content:"";

    position:absolute;

    width:600px;
    height:600px;

    border-radius:50%;

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

    top:-250px;
    right:-150px;
}

.process-header{

    text-align:center;

    margin-bottom:80px;
}

.process-header h2{

    color:white;

    font-size:54px;

    font-weight:900;

    margin-bottom:15px;
}

.process-header p{

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

    font-size:18px;
}

/* FLOW */

.process-flow{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;
}

/* CARDS */

.flow-card{

    width:220px;

    min-height:180px;

    background:white;

    border-radius:24px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    position:relative;

    box-shadow:
    0 20px 50px rgba(0,0,0,.15);

    opacity:0;

    transform:translateY(80px);

    animation:cardReveal .8s forwards;
}

.flow-card:nth-child(1){animation-delay:.2s;}
.flow-card:nth-child(3){animation-delay:.5s;}
.flow-card:nth-child(5){animation-delay:.8s;}
.flow-card:nth-child(7){animation-delay:1.1s;}
.flow-card:nth-child(9){animation-delay:1.4s;}

.step-number{

    position:absolute;

    top:15px;
    left:15px;

    width:40px;
    height:40px;

    border-radius:50%;

    background:#ffc107;

    color:#111;

    display:flex;

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

    font-weight:800;
}

.flow-card h3{

    font-size:28px;

    color:#071d49;

    font-weight:800;
}

/* ARROWS */

.flow-arrow{

    font-size:42px;

    color:#00d4ff;

    font-weight:900;

    opacity:0;

    animation:arrowPulse 2s infinite,
              fadeArrow .8s forwards;
}

.flow-arrow:nth-child(2){animation-delay:.3s;}
.flow-arrow:nth-child(4){animation-delay:.6s;}
.flow-arrow:nth-child(6){animation-delay:.9s;}
.flow-arrow:nth-child(8){animation-delay:1.2s;}

/* ANIMATIONS */

@keyframes cardReveal{

    from{

        opacity:0;

        transform:
        translateY(80px)
        rotate(-6deg)
        scale(.8);
    }

    to{

        opacity:1;

        transform:
        translateY(0)
        rotate(0)
        scale(1);
    }
}

@keyframes fadeArrow{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }
}

@keyframes arrowPulse{

    0%{
        transform:translateX(0);
    }

    50%{
        transform:translateX(12px);
    }

    100%{
        transform:translateX(0);
    }
}

/* HOVER */

.flow-card:hover{

    transform:
    translateY(-12px)
    scale(1.05);

    transition:.4s;

    box-shadow:
    0 30px 70px rgba(0,212,255,.25);
}

/* MOBILE */

@media(max-width:1100px){

.process-flow{

    flex-direction:column;
}

.flow-arrow{

    transform:rotate(90deg);
}
}




/* ==================================
   LOGICS TIP BOX
================================== */

.logics-tip{

    background:linear-gradient(
        135deg,
        #fff8db,
        #fff2b8
    );

    border-left:6px solid #ffc107;

    padding:24px 28px;

    margin-top:30px;

    border-radius:18px;

    color:#111 !important;

    font-size:18px;

    line-height:1.8;

    font-weight:500;

    box-shadow:
    0 12px 30px rgba(255,193,7,.15);

    position:relative;

    overflow:hidden;

    transition:.4s ease;
}

.logics-tip::before{

    content:"💡";

    position:absolute;

    top:15px;
    right:20px;

    font-size:32px;

    opacity:.15;
}

.logics-tip strong{

    color:#071d49;

    font-weight:800;

    font-size:19px;
}

.logics-tip:hover{

    transform:translateY(-5px);

    box-shadow:
    0 18px 40px rgba(255,193,7,.25);
}


/* ==================================
   API & COMPONENTS FEATURE BOXES
================================== */

section ul{

    list-style:none !important;

    margin:40px 0 !important;

    padding:0 !important;

    display:grid;

    gap:22px;
}

section ul li{

    background:linear-gradient(
        135deg,
        #ffffff,
        #f7faff
    ) !important;

    border:2px solid #dbe6f3 !important;

    border-left:8px solid #ffc107 !important;

    border-radius:22px !important;

    padding:26px 28px !important;

    color:#111 !important;

    font-size:18px !important;

    line-height:1.8 !important;

    position:relative;

    overflow:hidden;

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

    opacity:0;

    animation:scrapbookCards .9s forwards;
}

/* stagger effect */

section ul li:nth-child(1){
    animation-delay:.2s;
}

section ul li:nth-child(2){
    animation-delay:.45s;
}

section ul li:nth-child(3){
    animation-delay:.7s;
}

section ul li:nth-child(4){
    animation-delay:.95s;
}

/* check badge */

section ul li::before{

    content:"✓";

    position:absolute;

    right:20px;
    top:18px;

    width:38px;
    height:38px;

    border-radius:50%;

    background:#ffc107;

    color:#111;

    display:flex;

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

    font-weight:900;

    box-shadow:
    0 5px 15px rgba(255,193,7,.3);
}

section ul li strong{

    color:#071d49 !important;

    font-size:20px;

    font-weight:800;
}

/* hover */

section ul li:hover{

    transform:
    translateY(-10px)
    rotate(0deg)
    scale(1.02);

    transition:.4s;

    box-shadow:
    0 25px 50px rgba(0,0,0,.12);

    border-color:#ffc107 !important;
}

/* scrapbook entrance */

@keyframes scrapbookCards{

    0%{

        opacity:0;

        transform:
        translateY(80px)
        rotate(-6deg)
        scale(.85);
    }

    50%{

        opacity:1;

        transform:
        translateY(-10px)
        rotate(2deg)
        scale(1.03);
    }

    100%{

        opacity:1;

        transform:
        translateY(0)
        rotate(0deg)
        scale(1);
    }
}


/* ==================================
   BUILD APPROACH COMPARISON TABLE
================================== */

section table{

    width:100%;

    border-collapse:separate !important;

    border-spacing:0 18px;

    margin-top:50px;

    border:none !important;

    opacity:0;

    transform:translateY(80px);

    transition:1s ease;
}

/* table appears */

section table.table-show{

    opacity:1;

    transform:translateY(0);
}

/* heading row */

section table thead tr{

    background:linear-gradient(
        135deg,
        #071d49,
        #0c2d69
    );
}

section table th{

    color:white;

    padding:24px;

    font-size:20px;

    font-weight:800;

    border:none;

    text-align:left;
}

section table th:first-child{

    border-radius:18px 0 0 18px;
}

section table th:last-child{

    border-radius:0 18px 18px 0;
}

/* body rows */

section table tbody tr{

    background:white;

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

    opacity:0;

    transform:
    translateX(-80px)
    rotate(-2deg);

    transition:.8s ease;
}

/* activated row */

section table tbody tr.row-show{

    opacity:1;

    transform:
    translateX(0)
    rotate(0deg);
}

/* cells */

section table td{

    padding:24px;

    color:#111 !important;

    font-size:17px;

    border-top:1px solid #edf2f7;

    border-bottom:1px solid #edf2f7;
}

/* first column */

section table td:first-child{

    font-weight:800;

    color:#071d49 !important;

    border-left:6px solid #ffc107;

    border-radius:18px 0 0 18px;
}

/* second column */

section table td:last-child{

    border-radius:0 18px 18px 0;
}

/* hover motion */

section table tbody tr:hover{

    transform:
    translateX(12px)
    scale(1.02);

    box-shadow:
    0 20px 45px rgba(0,212,255,.18);

    transition:.4s;
}

/* floating glow */

section table::before{

    content:"";

    position:absolute;

    width:300px;
    height:300px;

    background:rgba(0,212,255,.08);

    filter:blur(80px);

    border-radius:50%;
}

/* mobile */

@media(max-width:768px){

section table{

    display:block;

    overflow-x:auto;
}
}

/* ==================================
   PREMIUM CONTACT SECTION
================================== */

.contact-cta{

    position:relative;

    max-width:1400px;

    margin:140px auto;

    padding:120px 50px;

    border-radius:40px;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        #071d49 0%,
        #0c2d69 100%
    );

    text-align:center;
}

/* background glow */

.contact-cta::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    border-radius:50%;

    background:rgba(255,193,7,.08);

    top:-250px;
    right:-150px;

    filter:blur(40px);
}

.contact-cta::after{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

    border-radius:50%;

    background:rgba(0,212,255,.08);

    bottom:-150px;
    left:-100px;

    filter:blur(40px);
}

.contact-content{

    position:relative;
    z-index:2;
}

.contact-tag{

    display:inline-block;

    padding:10px 24px;

    background:rgba(255,193,7,.15);

    border:1px solid rgba(255,193,7,.4);

    border-radius:50px;

    color:#ffd54f;

    font-size:14px;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:25px;
}

.contact-cta h2{

    color:#ffffff;

    font-size:64px;

    font-weight:900;

    line-height:1.1;

    max-width:900px;

    margin:auto;

    margin-bottom:25px;
}

.contact-cta p{

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

    font-size:20px;

    max-width:850px;

    margin:auto;

    line-height:1.9;

    margin-bottom:60px;
}

/* cards */

.contact-cards{

    display:grid;

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

    gap:30px;

    margin-bottom:60px;
}

.contact-card{

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

    border:1px solid rgba(255,255,255,.12);

    border-radius:28px;

    padding:35px;

    backdrop-filter:blur(10px);

    transition:.4s;
}

.contact-card:hover{

    transform:translateY(-10px);

    border-color:#ffc107;

    box-shadow:
    0 20px 50px rgba(255,193,7,.15);
}

.contact-icon{

    font-size:40px;

    margin-bottom:20px;
}

.contact-card h3{

    color:white;

    font-size:24px;

    margin-bottom:15px;
}

.contact-card a{

    color:#ffd54f;

    text-decoration:none;

    font-weight:700;

    font-size:18px;
}

.contact-card p{

    margin:0;

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

    font-size:16px;
}

/* button */

.contact-btn{

    display:inline-block;

    padding:18px 40px;

    border-radius:60px;

    background:#ffc107;

    color:#071d49;

    text-decoration:none;

    font-weight:900;

    font-size:18px;

    transition:.4s;
}

.contact-btn:hover{

    transform:translateY(-5px);

    box-shadow:
    0 15px 35px rgba(255,193,7,.35);
}

/* responsive */

@media(max-width:768px){

.contact-cta{

    padding:80px 25px;
}

.contact-cta h2{

    font-size:42px;
}

.contact-cta p{

    font-size:17px;
}
}