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

   STATON SERVICES CO.

   COMPREHENSIVE PREMIUM STYLING

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

body {

    background-color: #111111;

    color: #FFFFFF;

    font-family: Arial, sans-serif;

    text-align: center;

    margin: 40px;

}



h1 {

    color: #D4AF37;

    font-size: 60px;

    letter-spacing: 4px;

}

h2 {

    color: #D4AF37;

    margin-top: 40px;

}



p {

    font-size: 20px;

    line-height: 1.6;

}



.project {

    background-color: #1A1A1A;

    border: 1px solid #D4AF37;

    padding: 20px;

    margin: 20px auto;

    max-width: 500px;

    border-radius: 10px;

}.hero {

    padding: 60px 20px;

    margin-bottom: 40px;

}



.hero p {

    max-width: 600px;

    margin: auto;

}.button {

    display: inline-block;

    background-color: #D4AF37;

    color: #111111;

    padding: 12px 25px;

    margin-top: 20px;

    text-decoration: none;

    border-radius: 8px;

}





.button:hover {

    background-color: #B8860B;

}

nav {

    margin-bottom: 40px;

}



nav a {

    color: white;

    text-decoration: none;

    margin: 15px;

    font-size: 18px;

}



nav a:hover {

    color: #00aaff;

}.hero {

    display: block;

}



.hero p {

    display: block;

    margin: 20px auto;

}



.button {

    display: inline-block;

}.logo {

    width: 150px;

    height: auto;

    display: block;

    margin: 0 auto 20px;

}.logo {

    width: 150px !important;

    height: auto;

    display: block;

    margin: 0 auto 20px;

}a {

    color: #D4AF37;

    text-decoration: none;

}



a:hover {

    color: #FFD700;

    text-decoration: underline;

}.project {

    background-color: #222;

    padding: 25px;

    margin: 25px auto;

    max-width: 600px;

    border-radius: 15px;

    border: 1px solid #D4AF37;

    transition: 0.3s;

}



.project:hover {

    transform: translateY(-5px);

    box-shadow: 0 0 15px #D4AF37;

}.services-container {

    display: grid;

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

    gap: 25px;

    max-width: 900px;

    margin: 0 auto;

}.hero {

    text-align: center;

    padding: 100px 20px;

    margin-bottom: 40px;

}



.hero h1 {

    font-size: 55px;

    color: #D4AF37;

    margin-bottom: 10px;

}



.hero h2 {

    font-size: 30px;

    color: white;

    margin-bottom: 20px;

}



.hero p {

    font-size: 18px;

    max-width: 600px;

    margin: 0 auto 30px;

    line-height: 1.6;

}.button {

    display: inline-block;

    padding: 15px 35px;

    background-color: #D4AF37;

    color: black;

    font-weight: bold;

    border-radius: 30px;

    transition: 0.3s;

}



.button:hover {

    background-color: #FFD700;

    transform: scale(1.05);

}.hero {

    background: linear-gradient(

        rgba(0,0,0,0.85),

        rgba(0,0,0,0.85)

    );

    border-bottom: 2px solid #D4AF37;

}body {

    background: #0a0a0a;

    color: #f5f5f5;

    font-family: Arial, sans-serif;

    line-height: 1.6;

}





/* Adds smooth scrolling */

html {

    scroll-behavior: smooth;

}





/* Gives sections breathing room */

section {

    max-width: 1100px;

    margin: 80px auto;

    padding: 40px 25px;

}h1 {

    font-size: 60px;

    letter-spacing: 2px;

}



h2 {

    font-size: 36px;

    border-bottom: 2px solid #D4AF37;

    display: inline-block;

    padding-bottom: 8px;

}



h3 {

    font-size: 24px;

}.button {

    background: linear-gradient(135deg, #D4AF37, #8a6a00);

    color: black;

    padding: 15px 35px;

    border-radius: 50px;

    font-weight: bold;

    box-shadow: 0 10px 25px rgba(212,175,55,0.3);

}



.button:hover {

    transform: translateY(-5px);

    box-shadow: 0 15px 35px rgba(212,175,55,0.6);

}/* ===== PREMIUM NAVIGATION BAR ===== */



nav {

    position: sticky;

    top: 0;

    z-index: 1000;



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

    backdrop-filter: blur(12px);



    padding: 20px;



    text-align: center;



    border-bottom: 1px solid rgba(212, 175, 55, 0.5);



    box-shadow:

        0 5px 25px rgba(0,0,0,0.6),

        0 0 20px rgba(212,175,55,0.15);

}





/* Navigation Links */



nav a {



    position: relative;



    color: #D4AF37;



    text-decoration: none;



    margin: 0 20px;



    font-size: 18px;



    font-weight: bold;



    letter-spacing: 1px;



    transition: 0.3s;



}





/* Hover Glow */



nav a:hover {



    color: white;



    text-shadow:

        0 0 8px #D4AF37,

        0 0 20px #D4AF37;



}





/* Gold Line Animation */



nav a::after {



    content: "";



    position: absolute;



    left: 0;



    bottom: -8px;



    width: 0%;



    height: 2px;



    background: #D4AF37;



    transition: 0.3s;



}





nav a:hover::after {



    width: 100%;



}.hero {



    background:

    linear-gradient(

        rgba(0,0,0,0.65),

        rgba(0,0,0,0.65)

    ),

    url("hero.png");



    background-size: cover;

    background-position: center;



    border-radius: 25px;



    padding: 140px 20px;



    box-shadow:

    0 0 40px rgba(212,175,55,0.35);

}/* ==================================================

   STATON SERVICES CO.

   LUXURY PROFESSIONAL WEBSITE SYSTEM

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





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



* {

    box-sizing: border-box;

}





html {

    scroll-behavior: smooth;

}





body {



    margin: 0;



    background:

    radial-gradient(

        circle at top,

        #222 0%,

        #090909 45%,

        #030303 100%

    );



    color: #f2f2f2;



    font-family:

    "Segoe UI",

    Arial,

    sans-serif;



}





/* ---------- PREMIUM TEXT ---------- */





p {



    color:#d5d5d5;



    font-size:18px;



    line-height:1.8;



}





h1,h2,h3 {



    font-weight:900;



}





h2 {



    color:#D4AF37;



    letter-spacing:2px;



    text-transform:uppercase;



}







/* ---------- NAVIGATION ---------- */





nav {



    position:sticky;



    top:0;



    z-index:999;



    padding:22px;



    text-align:center;



    background:



    rgba(5,5,5,.75);





    backdrop-filter:



    blur(18px);





    border-bottom:



    1px solid rgba(212,175,55,.4);





    box-shadow:



    0 10px 40px black;



}







nav a {



    color:#D4AF37;



    font-weight:800;



    letter-spacing:2px;



    margin:0 20px;



    text-decoration:none;



    position:relative;



    transition:.4s;



}







nav a:hover {



    color:white;



    text-shadow:



    0 0 20px #FFD700;



}







nav a::after {



    content:"";



    position:absolute;



    bottom:-10px;



    left:50%;



    width:0;



    height:3px;



    background:#FFD700;



    transition:.4s;



    transform:translateX(-50%);



}







nav a:hover::after {



    width:100%;



}







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





.hero {



    min-height:650px;



    display:flex;



    justify-content:center;



    align-items:center;



    text-align:center;



    flex-direction:column;





    background:



    linear-gradient(

    rgba(0,0,0,.55),

    rgba(0,0,0,.9)

    ),



    url("hero.png");





    background-size:cover;



    background-position:center;





    border-radius:35px;





    margin:60px auto;





    max-width:1200px;





    border:



    1px solid rgba(212,175,55,.5);





    box-shadow:



    0 0 80px rgba(212,175,55,.2),



    inset 0 0 60px black;





    animation:



    heroEnter 1.5s ease;



}







.hero h1 {





    font-size:



    clamp(50px,8vw,100px);





    text-transform:uppercase;





    letter-spacing:8px;





    background:



    linear-gradient(

    90deg,

    #fff3a0,

    #D4AF37,

    #fff3a0

    );





    background-clip:text;

    -webkit-background-clip:text;



    color:transparent;





    animation:



    goldPulse 3s infinite alternate;



}







.hero h2 {



    color:white;



    font-size:



    clamp(25px,4vw,45px);



}







/* ---------- BUTTONS ---------- */





.button {





    margin-top:30px;





    padding:



    18px 45px;





    border-radius:



    50px;





    background:



    linear-gradient(

    135deg,

    #FFD700,

    #8b6508

    );





    color:black;





    font-weight:900;





    text-decoration:none;





    box-shadow:



    0 0 30px rgba(255,215,0,.5);





    transition:.4s;



}







.button:hover {





    transform:



    translateY(-8px)

    scale(1.08);





    box-shadow:



    0 0 60px rgba(255,215,0,.9);



}







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





section {



    max-width:1100px;



    margin:90px auto;



    padding:40px;



}







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





.project {





    background:



    linear-gradient(

    145deg,

    rgba(255,255,255,.08),

    rgba(0,0,0,.7)

    );





    backdrop-filter:



    blur(12px);





    border:



    1px solid rgba(212,175,55,.35);





    border-radius:



    25px;





    padding:



    35px;





    margin:



    25px 0;





    box-shadow:



    0 20px 50px black;





    transition:.5s;



}







.project:hover {





    transform:



    translateY(-15px);





    border-color:#FFD700;





    box-shadow:



    0 30px 70px rgba(212,175,55,.25);



}







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





#contact {





    background:



    rgba(255,255,255,.04);





    border-radius:



    30px;





    border:



    1px solid rgba(212,175,55,.3);



}







#contact a {





    color:#FFD700;





    font-weight:bold;





}







/* ---------- ANIMATIONS ---------- */





@keyframes goldPulse {





from {



filter:



drop-shadow(

0 0 5px #D4AF37

);



}





to {



filter:



drop-shadow(

0 0 30px #FFD700

);



}



}







@keyframes heroEnter {





from {



opacity:0;



transform:translateY(40px);



}





to {



opacity:1;



transform:translateY(0);



}



}







/* ---------- MOBILE ---------- */





@media(max-width:700px){





nav a {



display:inline-block;



margin:10px;



}





.hero {



margin:20px;



}





section {



padding:20px;



}





}/* ==========================================

   PREMIUM LAYOUT REFINEMENTS

   Staton Services Co.

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





/* Reduce giant empty spaces */



section {



    margin: 50px auto;



    padding: 25px 30px;



}





/* Better paragraph styling */



p {



    color: #cfcfcf;



    font-size: 17px;



    line-height: 1.65;



    letter-spacing: .4px;



}







/* Make important text slightly brighter */



.hero p {



    color:#e5e5e5;



}





#contact p {



    color:#d8d8d8;



}







/* Service cards layout */



#services {



    display:flex;



    flex-direction:column;



}







/* Every service card */



.project {



    width:75%;



    margin:25px 0;



}







/* Alternate cards */



.project:nth-of-type(even) {



    align-self:flex-end;



}







/* Add subtle glow edge */



.project {



    position:relative;



    overflow:hidden;



}







/* Gold shine effect */



.project::after {



    content:"";



    position:absolute;



    top:0;



    left:-100%;



    width:50%;



    height:100%;





    background:



    linear-gradient(

    120deg,

    transparent,

    rgba(255,215,0,.15),

    transparent

    );





    transition:.6s;



}







.project:hover::after {



    left:120%;



}







/* Cleaner service titles */



.project h3 {



    color:#FFD700;



    font-size:26px;



    letter-spacing:1px;



    margin-top:0;



}







/* Contact makeover */



#contact {



    text-align:center;



    padding:45px 30px;



}







/* Contact links */



#contact a {



    display:inline-block;



    margin:8px;



    padding:10px 18px;





    background:



    rgba(212,175,55,.08);





    border:



    1px solid rgba(212,175,55,.3);





    border-radius:30px;





    transition:.3s;



}







#contact a:hover {



    background:#D4AF37;



    color:black;



    box-shadow:



    0 0 25px rgba(212,175,55,.6);



}







/* Make bullet-style skills cleaner */



#services p {



    color:#d0d0d0;



}







/* Better overall readability */



body {



    color:#eeeeee;



}







/* Smaller gaps between content blocks */



h2 {



    margin-bottom:20px;



}





h3 {



    margin-bottom:10px;



}





/* Mobile fix */



@media(max-width:700px){



.project {



    width:100%;



}





.project:nth-of-type(even){



    align-self:auto;



}



}/* ==========================================

   STATON SERVICES CO.

   PREMIUM MOTION + TEXT SYSTEM

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





/* ===== BODY TEXT UPGRADE ===== */



p,

li {



    color:#c9c9c9;



    font-family:

    "Segoe UI",

    Arial,

    sans-serif;



    font-size:17px;



    letter-spacing:.5px;



    line-height:1.75;



    text-shadow:

    0 2px 10px rgba(0,0,0,.8);



    transition:.3s;



}





p:hover {



    color:#f2f2f2;



}







/* ===== MAKE TEXT FEEL PREMIUM ===== */





.project p,

#contact p {



    background:



    linear-gradient(

    90deg,

    #cfcfcf,

    #ffffff,

    #b8b8b8

    );





    background-clip:text;

    -webkit-background-clip:text;



    color:transparent;





}







/* ===== SERVICE CARDS FLOAT ===== */





.project {



    animation:



    floatingCards 6s ease-in-out infinite;



}







.project:nth-child(even){



    animation-delay:1.5s;



}







.project:nth-child(3n){



    animation-delay:3s;



}







@keyframes floatingCards {





0%,100%{



transform:translateY(0);



}





50%{



transform:translateY(-8px);



}





}







/* ===== HOW IT WORKS STYLE ===== */





/* If you add a how it works section with cards */



.how-card {





    width:70%;





    padding:30px;





    margin:30px 0;





    background:



    linear-gradient(

    145deg,

    rgba(255,255,255,.08),

    rgba(0,0,0,.8)

    );





    border:



    1px solid rgba(212,175,55,.35);





    border-radius:25px;





    box-shadow:



    0 20px 50px rgba(0,0,0,.8);





    transition:.5s;





}





.how-card:nth-child(even){



    margin-left:auto;



}







.how-card:hover {





    transform:



    translateY(-12px)

    scale(1.03);





    border-color:#FFD700;





    box-shadow:



    0 0 45px rgba(212,175,55,.35);





}







/* ===== ALL NORMAL TEXT GLOW ===== */





body p,

body li {





    animation:



    textFade 1s ease both;



}







@keyframes textFade {





from {



opacity:0;



transform:translateY(10px);



}





to {



opacity:1;



transform:translateY(0);



}





}







/* ===== CONTACT PREMIUM LOOK ===== */





#contact {





    background:



    linear-gradient(

    145deg,

    rgba(255,255,255,.07),

    rgba(0,0,0,.8)

    );





}







/* Contact text shine */



#contact p {





    color:#e2e2e2;





}







/* ===== GOLD LIGHT SWEEP ===== */





h1,h2,h3,

p,

a {





    position:relative;



}







.project:hover p {





    text-shadow:



    0 0 15px rgba(212,175,55,.25);





}







/* ===== SMOOTH PAGE FEEL ===== */





section {





    animation:



    sectionEnter .8s ease both;





}





@keyframes sectionEnter {





from {



opacity:0;



transform:translateY(25px);



}





to {



opacity:1;



transform:translateY(0);



}





}/* ==========================================

   STATON SERVICES CO.

   PREMIUM ANIMATION SYSTEM

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





/* Smooth entrance for everything */



.hero,

.project,

section,

#contact {



    animation:

    fadeUp 1s ease both;



}





@keyframes fadeUp {



from {



    opacity:0;



    transform:

    translateY(40px);



}





to {



    opacity:1;



    transform:

    translateY(0);



}



}







/* Floating effect */



.project {



    animation:

    floatCard 6s ease-in-out infinite;



}





@keyframes floatCard {





0%,100% {



    transform:

    translateY(0);



}





50% {



    transform:

    translateY(-10px);



}





}







/* Gold shine sweep */



.project {



    overflow:hidden;



    position:relative;



}







.project::after {





    content:"";





    position:absolute;





    top:0;





    left:-120%;





    width:80%;





    height:100%;







    background:



    linear-gradient(

    120deg,

    transparent,

    rgba(255,215,0,.25),

    transparent

    );





    transform:skewX(-25deg);





    transition:.8s;





}







.project:hover::after {





    left:140%;





}







/* Button breathing glow */





.button {





    animation:



    buttonPulse 3s infinite;





}







@keyframes buttonPulse {





0%,100% {





box-shadow:



0 0 20px rgba(212,175,55,.5);





}





50% {





box-shadow:



0 0 45px rgba(255,215,0,.9);





}





}







/* Navigation glow */



nav {





    animation:



    navDrop .8s ease;





}





@keyframes navDrop {





from {



transform:

translateY(-50px);



opacity:0;



}





to {



transform:

translateY(0);



opacity:1;



}





}







/* Title cinematic reveal */





.hero h1 {





animation:



titleReveal 1.5s ease;





}







@keyframes titleReveal {





from {



opacity:0;



letter-spacing:20px;



filter:

blur(10px);



}





to {



opacity:1;



letter-spacing:8px;



filter:

blur(0);



}





}







/* Links smooth hover */





a {





transition:



.35s ease;





}







/* Contact section glow */





#contact:hover {





box-shadow:



0 0 50px rgba(212,175,55,.25);





transition:.5s;





}







/* Image depth */





.hero {





background-attachment:fixed;





}/* ==========================================

   CONTACT BACKGROUND SECTION

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



#contact {



    position:relative;



    overflow:hidden;



    background:



    linear-gradient(

        rgba(0,0,0,.75),

        rgba(0,0,0,.75)

    ),



    url("contact.png");





    background-size:



    cover;





    background-position:



    center;





    border-radius:



    30px;





    border:



    1px solid rgba(212,175,55,.5);





    box-shadow:



    0 0 50px rgba(212,175,55,.25);





    padding:



    70px 40px;



}/* =====================================================

   STATON SERVICES CO.

   PREMIUM CONTACT + HOW IT WORKS SYSTEM

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





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

   CONTACT SECTION

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





#contact {



    position:relative;



    text-align:center;



    overflow:hidden;



    display:flex;



    flex-direction:column;



    align-items:center;



    justify-content:center;



    padding:70px 40px;



    border-radius:35px;



}







/* Animated glowing border */



#contact::before {



    content:"";



    position:absolute;



    inset:0;



    border-radius:35px;



    padding:2px;



    background:



    linear-gradient(

    90deg,

    transparent,

    #FFD700,

    transparent

    );





    animation:



    contactBorder 5s linear infinite;





    opacity:.8;



}







@keyframes contactBorder {





0% {



transform:translateX(-100%);



}





100% {



transform:translateX(100%);



}





}







/* Contact heading */



#contact h2 {



    position:relative;



    z-index:2;



}







/* Contact text */





#contact p {



    max-width:700px;



    margin:20px auto;



    position:relative;



    z-index:2;



}







/* Contact buttons container */



#contact a {





    position:relative;





    z-index:2;





    display:inline-flex;





    align-items:center;





    justify-content:center;





    min-width:280px;





    margin:15px;





    padding:20px 35px;





    border-radius:25px;





    background:





    linear-gradient(

    145deg,

    rgba(255,255,255,.15),

    rgba(0,0,0,.8)

    );





    backdrop-filter:



    blur(15px);







    border:



    1px solid rgba(212,175,55,.5);







    color:#FFD700;







    font-size:18px;







    font-weight:700;







    box-shadow:





    0 20px 50px rgba(0,0,0,.7);







    overflow:hidden;







    animation:



    contactFloat 5s ease-in-out infinite;





    transition:.5s;





}







/* Floating movement */





#contact a:nth-of-type(2){



    animation-delay:1.5s;



}







@keyframes contactFloat {





0%,100% {



transform:translateY(0);



}





50% {



transform:translateY(-12px);



}





}







/* Gold light sweep */





#contact a::after {





    content:"";





    position:absolute;





    top:0;





    left:-120%;





    width:80%;





    height:100%;







    background:





    linear-gradient(

    120deg,

    transparent,

    rgba(255,215,0,.45),

    transparent

    );







    transition:.8s;





}







#contact a:hover::after {





    left:140%;





}







#contact a:hover {





    transform:



    translateY(-15px)

    scale(1.05);







    color:white;







    border-color:#FFD700;







    box-shadow:





    0 0 50px rgba(255,215,0,.7);





}







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

   HOW IT WORKS

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





#how-it-works {



    position:relative;



}







/* Center path */





#how-it-works::before {





    content:"";





    position:absolute;





    left:50%;





    top:130px;





    bottom:50px;





    width:4px;







    background:





    linear-gradient(

    transparent,

    #FFD700,

    transparent

    );





    box-shadow:





    0 0 20px #FFD700;





}







/* Process cards */





.how-card {





    width:45%;





    padding:35px;





    margin:55px 0;





    position:relative;





    border-radius:30px;





    background:





    linear-gradient(

    145deg,

    rgba(255,255,255,.12),

    rgba(0,0,0,.85)

    );





    border:



    1px solid rgba(212,175,55,.4);







    box-shadow:





    0 25px 60px rgba(0,0,0,.8);







    backdrop-filter:



    blur(15px);







    overflow:hidden;







    animation:





    processFloat 6s ease-in-out infinite;





    transition:.5s;





}







/* Alternate sides */





.how-card:nth-child(even){



    margin-left:auto;



}







.how-card:nth-child(3){



    animation-delay:1s;



}







.how-card:nth-child(4){



    animation-delay:2s;



}







.how-card:nth-child(5){



    animation-delay:3s;



}







/* Floating */





@keyframes processFloat {





0%,100% {



transform:translateY(0);



}





50% {



transform:translateY(-10px);



}





}







/* Hover glow */





.how-card:hover {





    transform:





    translateY(-15px)

    scale(1.04);







    border-color:#FFD700;







    box-shadow:





    0 0 60px rgba(212,175,55,.5);





}







/* Titles */





.how-card h3 {





    color:#FFD700;





    font-size:28px;





    letter-spacing:2px;





}







/* Light sweep */





.how-card::after {





    content:"";





    position:absolute;





    top:0;





    left:-120%;





    width:80%;





    height:100%;





    background:





    linear-gradient(

    120deg,

    transparent,

    rgba(255,215,0,.35),

    transparent

    );





    transition:.8s;





}







.how-card:hover::after {





    left:130%;





}







/* Mobile */





@media(max-width:700px){





#how-it-works::before {



display:none;



}





.how-card {



width:100%;



}





#contact a {



width:90%;



}





}/* ==========================================

   STATON SERVICES CO.

   LIQUID GLASS HOW IT WORKS

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





#how-it-works {



    position:relative;



    overflow:hidden;



    padding:80px 20px;



}





/* moving liquid background */





#how-it-works::before {





    content:"";





    position:absolute;





    width:600px;





    height:600px;





    left:50%;





    top:50%;





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





    background:





    radial-gradient(

    circle,

    rgba(212,175,55,.25),

    transparent 65%

    );





    filter:blur(50px);





    animation:



    liquidMove 8s infinite alternate;





}







@keyframes liquidMove {





0% {



transform:

translate(-60%,-50%)

scale(1);



}





100% {



transform:

translate(-40%,-45%)

scale(1.4);



}





}







/* cards */





.how-card {





    position:relative;





    width:45%;





    margin:80px 0;





    padding:45px;





    border-radius:35px;







    background:





    linear-gradient(

    145deg,

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

    rgba(0,0,0,.75)

    );







    backdrop-filter:



    blur(25px);







    border:



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







    box-shadow:





    0 30px 80px rgba(0,0,0,.8);







    overflow:hidden;





    opacity:0;





    animation:





    revealCard 1.2s forwards,

    floatGlass 6s infinite ease-in-out;





}







/* alternating sides */





.how-card:nth-child(odd) {





    margin-right:auto;





    animation-delay:.3s;





}







.how-card:nth-child(even) {





    margin-left:auto;





    animation-delay:.8s;





}







/* reveal */





@keyframes revealCard {





from {





opacity:0;





transform:



translateX(-150px)

scale(.7)

rotate(-8deg);





filter:



blur(15px);





}





to {





opacity:1;





transform:



translateX(0)

scale(1)

rotate(0);





filter:



blur(0);





}





}







/* floating liquid motion */





@keyframes floatGlass {





0%,100% {





transform:translateY(0);





}





50% {





transform:translateY(-15px);





}





}





@keyframes shineMove {





0% {





top:-150%;





}





100% {





top:150%;





}





}







/* card hover */





.how-card:hover {





    transform:



    scale(1.08)

    translateY(-20px);







    border-color:#FFD700;







    box-shadow:





    0 0 70px rgba(255,215,0,.7);





}







/* titles */





.how-card h3 {





    color:#FFD700;





    font-size:32px;





    letter-spacing:3px;





    position:relative;





    z-index:2;





}







.how-card p {





    position:relative;





    z-index:2;





}





/* mobile */





@media(max-width:700px){





.how-card {





width:100%;





}


}/* ==========================================
   PREMIUM CONTACT BACKGROUND IMAGE
========================================== */

#contact {

    position:relative;

    overflow:hidden;

    background:

    linear-gradient(
        rgba(0,0,0,.75),
        rgba(0,0,0,.85)
    ),

    url("contact.png");


    background-size:cover;

    background-position:center;


    border-radius:35px;


    border:

    1px solid rgba(212,175,55,.5);


    box-shadow:

    0 0 60px rgba(212,175,55,.25);


    padding:70px 40px;

}/* ==========================================
   HOW IT WORKS PREMIUM ANIMATION
========================================== */


#how-it-works {

    position:relative;

    overflow:hidden;

}


/* Glass cards */

.how-card {

    position:relative;

    width:45%;

    padding:40px;

    margin:60px 0;


    background:

    linear-gradient(
    145deg,
    rgba(255,255,255,.15),
    rgba(0,0,0,.85)
    );


    backdrop-filter:blur(20px);


    border-radius:30px;


    border:

    1px solid rgba(212,175,55,.45);


    box-shadow:

    0 25px 70px rgba(0,0,0,.8);


    overflow:hidden;


    opacity:0;


    animation:

    cardReveal 1.2s ease forwards,
    cardFloat 5s ease-in-out infinite;


}


/* Alternating sides */

.how-card:nth-child(odd){

    animation-name:slideLeft, cardFloat;

}


.how-card:nth-child(even){

    margin-left:auto;

    animation-name:slideRight, cardFloat;

}



/* Left entrance */

@keyframes slideLeft {

from {

    opacity:0;

    transform:

    translateX(-150px)
    scale(.8);


    filter:blur(10px);

}


to {

    opacity:1;

    transform:

    translateX(0)
    scale(1);


    filter:blur(0);

}

}



/* Right entrance */

@keyframes slideRight {

from {

    opacity:0;

    transform:

    translateX(150px)
    scale(.8);


    filter:blur(10px);

}


to {

    opacity:1;

    transform:

    translateX(0)
    scale(1);


    filter:blur(0);

}

}



/* Floating motion */

@keyframes cardFloat {


0%,100%{

    translate:0 0;

}


50%{

    translate:0 -12px;

}

}



/* Gold moving shine */

.how-card::after {


    content:"";


    position:absolute;


    top:0;

    left:-120%;


    width:70%;


    height:100%;


    background:


    linear-gradient(

    120deg,

    transparent,

    rgba(255,215,0,.35),

    transparent

    );


    transform:skewX(-25deg);


    animation:

    lightSweep 5s infinite;


}



@keyframes lightSweep {


0%{

    left:-120%;

}


40%,100%{

    left:140%;

}


}



/* Hover effect */

.how-card:hover {


    transform:

    translateY(-20px)
    scale(1.05);


    border-color:#FFD700;


    box-shadow:

    0 0 60px rgba(255,215,0,.65);


}


/* Titles */

.how-card h3 {


    color:#FFD700;


    font-size:30px;


    letter-spacing:2px;


}



/* Mobile */

@media(max-width:700px){


.how-card {

    width:100%;

}


}/* ==========================================
   SERVICE CARD GOLD LIGHT SWEEP
========================================== */


.project {

    position:relative;

    overflow:hidden;

}


/* Moving shine */

.project::after {

    content:"";


    position:absolute;


    top:0;

    left:-120%;


    width:70%;


    height:100%;


    background:


    linear-gradient(
    120deg,
    transparent,
    rgba(255,215,0,.45),
    transparent
    );


    transform:skewX(-25deg);


    transition:.8s;


}



/* Sweep happens on hover */

.project:hover::after {


    left:140%;


}



/* Extra premium hover glow */

.project:hover {


    border-color:#FFD700;


    box-shadow:


    0 0 40px rgba(255,215,0,.5);


    transform:

    translateY(-10px)
    scale(1.03);


}/* ==========================================
   CONTACT SECTION FIX
========================================== */


/* Keep all contact effects inside the box */

#contact {

    position:relative;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

}


/* Make contact links into premium cards */

#contact a {

    display:flex;

    justify-content:center;

    align-items:center;


    width:320px;

    min-height:80px;


    margin:20px auto;


    border-radius:25px;


    background:

    linear-gradient(
    145deg,
    rgba(255,255,255,.15),
    rgba(0,0,0,.8)
    );


    backdrop-filter:blur(15px);


    border:

    1px solid rgba(212,175,55,.5);


    color:#FFD700;


    font-size:18px;

    font-weight:800;


    text-decoration:none;


    box-shadow:

    0 20px 50px rgba(0,0,0,.6);


    position:relative;

    overflow:hidden;


    transition:.5s;

}



/* Floating movement */

#contact a:nth-of-type(1){

    animation:contactFloat 5s infinite ease-in-out;

}


#contact a:nth-of-type(2){

    animation:contactFloat 5s infinite ease-in-out;

    animation-delay:1s;

}



@keyframes contactFloat {


0%,100% {

    transform:translateY(0);

}


50% {

    transform:translateY(-12px);

}

}



/* Gold shine inside buttons */

#contact a::after {


    content:"";


    position:absolute;


    top:0;

    left:-120%;


    width:70%;


    height:100%;


    background:

    linear-gradient(
    120deg,
    transparent,
    rgba(255,215,0,.45),
    transparent
    );


    transform:skewX(-25deg);


    transition:.8s;

}



#contact a:hover::after {


    left:140%;


}



#contact a:hover {


    transform:

    translateY(-15px)
    scale(1.06);


    color:white;


    border-color:#FFD700;


    box-shadow:


    0 0 50px rgba(255,215,0,.7);

}



/* Stop glow escaping */

#contact::before {


    pointer-events:none;


}/* ==========================================
   FIX SCREEN GLOW + UPGRADE HOW IT WORKS
========================================== */


/* REMOVE THE GIANT GLOW ESCAPING THE PAGE */

#how-it-works::before,
#contact::before {

    display:none !important;

}


/* KEEP HOW IT WORKS CLEAN */

#how-it-works {

    overflow:hidden;

    position:relative;

}



/* BADASS GLASS PROCESS CARDS */

.how-card {

    position:relative;

    overflow:hidden;


    background:

    linear-gradient(
    145deg,
    rgba(255,255,255,.16),
    rgba(0,0,0,.85)
    );


    backdrop-filter:blur(18px);


    border:

    1px solid rgba(212,175,55,.5);


    box-shadow:

    0 25px 70px rgba(0,0,0,.8);


    animation:

    floatProcess 5s ease-in-out infinite;


}



/* ALTERNATING ENTRANCE */

.how-card:nth-child(odd) {

    animation:

    slideFromLeft 1.2s ease forwards,
    floatProcess 5s ease-in-out infinite 1.2s;

}


.how-card:nth-child(even) {

    animation:

    slideFromRight 1.2s ease forwards,
    floatProcess 5s ease-in-out infinite 1.2s;

}



/* LEFT REVEAL */

@keyframes slideFromLeft {

from {

    opacity:0;

    transform:

    translateX(-120px)
    rotate(-5deg);

}


to {

    opacity:1;

    transform:

    translateX(0)
    rotate(0);

}

}



/* RIGHT REVEAL */

@keyframes slideFromRight {

from {

    opacity:0;

    transform:

    translateX(120px)
    rotate(5deg);

}


to {

    opacity:1;

    transform:

    translateX(0)
    rotate(0);

}

}



/* FLOATING MOTION */

@keyframes floatProcess {


0%,100% {

    translate:0 0;

}


50% {

    translate:0 -15px;

}


}



/* GOLD LIGHT SWEEP */

.how-card::after {


    content:"";


    position:absolute;


    top:0;

    left:-150%;


    width:80%;


    height:100%;


    background:


    linear-gradient(
    120deg,
    transparent,
    rgba(255,215,0,.45),
    transparent
    );


    transform:skewX(-25deg);


    animation:

    processShine 6s infinite;


}



@keyframes processShine {


0% {

    left:-150%;

}


40%,100% {

    left:150%;

}


}



/* HOVER POWER */

.how-card:hover {


    transform:

    translateY(-20px)
    scale(1.06);


    border-color:#FFD700;


    box-shadow:


    0 0 70px rgba(255,215,0,.7);


}



/* PREMIUM TITLES */

.how-card h3 {


    color:#FFD700;


    text-shadow:

    0 0 15px rgba(255,215,0,.4);


}/* ==========================================
   HOW IT WORKS - LIQUID GLASS EXPERIENCE
========================================== */


/* Moving ambient glow behind cards */

#how-it-works {

    position:relative;

    overflow:hidden;

}


#how-it-works::after {

    content:"";

    position:absolute;


    width:500px;

    height:500px;


    background:

    radial-gradient(
    circle,
    rgba(212,175,55,.25),
    transparent 70%
    );


    filter:blur(60px);


    top:30%;

    left:50%;


    transform:translateX(-50%);


    animation:

    liquidGlow 8s infinite alternate;


    pointer-events:none;

}



@keyframes liquidGlow {


0% {

transform:
translateX(-60%)
scale(1);

}


100% {

transform:
translateX(-40%)
scale(1.4);

}


}



/* Premium card setup */

.how-card {


    transform-style:preserve-3d;


    perspective:1000px;


    animation:

    floatJourney 6s ease-in-out infinite;


}



/* Each card gets a different rhythm */

.how-card:nth-child(2){

    animation-delay:1s;

}


.how-card:nth-child(3){

    animation-delay:2s;

}



/* Floating motion */

@keyframes floatJourney {


0%,100% {

    transform:

    translateY(0)
    rotateX(0deg);

}


50% {

    transform:

    translateY(-18px)
    rotateX(3deg);

}


}



/* Liquid glass reflection */

.how-card::before {


    content:"";


    position:absolute;


    inset:-50%;


    background:


    linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.25),

    transparent

    );


    transform:

    rotate(25deg)
    translateX(-100%);



    transition:.8s;


}



.how-card:hover::before {


    transform:

    rotate(25deg)
    translateX(100%);


}



/* 3D hover */

.how-card:hover {


    transform:

    perspective(900px)

    rotateY(8deg)

    translateY(-25px)

    scale(1.06);


    box-shadow:


    0 0 80px rgba(255,215,0,.6);


}



/* Gold glowing titles */

.how-card h3 {


    animation:

    titleGlow 3s infinite alternate;


}



@keyframes titleGlow {


from {

text-shadow:

0 0 5px #D4AF37;

}


to {

text-shadow:

0 0 25px #FFD700;

}


}



/* Smooth text reveal */

.how-card p {


    transition:.5s;


}



.how-card:hover p {


    color:white;


    transform:

    translateY(-5px);


}/* ==========================================
   REMOVE HOW IT WORKS SCREEN GLOW
========================================== */

#how-it-works::after {

    display:none !important;

}


#how-it-works {

    overflow:hidden;

}/* ==========================================
   HOW IT WORKS - SAFE PREMIUM CARDS
========================================== */


.how-card {

    position:relative;

    overflow:hidden;

    transform-style:preserve-3d;


    animation:

    safeFloat 6s ease-in-out infinite;


    transition:.5s;


}



/* Different timing so they don't move together */

.how-card:nth-child(2){

    animation-delay:1s;

}


.how-card:nth-child(3){

    animation-delay:2s;

}



/* Floating */

@keyframes safeFloat {


0%,100% {

    transform:translateY(0);

}


50% {

    transform:translateY(-12px);

}


}



/* Inner shine */

.how-card::after {


    content:"";


    position:absolute;


    top:0;

    left:-120%;


    width:60%;


    height:100%;


    background:


    linear-gradient(

    120deg,

    transparent,

    rgba(255,215,0,.35),

    transparent

    );


    transform:skewX(-25deg);


    transition:.8s;


}



.how-card:hover::after {


    left:140%;


}



/* Hover lift */

.how-card:hover {


    transform:

    translateY(-18px)
    scale(1.04);


    border-color:#FFD700;


    box-shadow:


    0 0 50px rgba(255,215,0,.45);


}



/* Premium text */

.how-card h3 {


    color:#FFD700;


    text-shadow:


    0 0 15px rgba(255,215,0,.35);


}/* ==========================================
   HOW IT WORKS - TRUE ALTERNATING LAYOUT
========================================== */

#how-it-works {

    display:flex;

    flex-direction:column;

}


#how-it-works .how-card {

    width:55%;

}


/* First card RIGHT */

#how-it-works .how-card:nth-of-type(1) {

    align-self:flex-end;

    margin-right:5%;

}


/* Second card LEFT */

#how-it-works .how-card:nth-of-type(2) {

    align-self:flex-start;

    margin-left:5%;

}


/* Third card RIGHT */

#how-it-works .how-card:nth-of-type(3) {

    align-self:flex-end;

    margin-right:5%;

}


/* Mobile */

@media(max-width:700px){

#how-it-works .how-card {

    width:100%;

    margin-left:0;

    margin-right:0;

}

}/* ==========================================
   PREMIUM ALTERNATING INFORMATION CARDS
========================================== */


#testimonials .project,
#why-us .project,
#faq .project {


    width:60%;


}



/* Alternate cards */

#testimonials .project:nth-of-type(odd),
#why-us .project:nth-of-type(odd),
#faq .project:nth-of-type(odd) {


    margin-left:auto;


}



#testimonials .project:nth-of-type(even),
#why-us .project:nth-of-type(even),
#faq .project:nth-of-type(even) {


    margin-right:auto;


}



/* Mobile fix */

@media(max-width:700px){


#testimonials .project,
#why-us .project,
#faq .project {


width:100%;


}


}/* ==========================================
   PREMIUM BACKGROUND FOR TRUST SECTIONS
========================================== */


#testimonials,
#why-us,
#faq,
#cta {

    position:relative;

    overflow:hidden;

    background:

    linear-gradient(
        rgba(0,0,0,.78),
        rgba(0,0,0,.85)
    ),

    url("background.png");


    background-size:cover;

    background-position:center;

    background-attachment:fixed;


    border-radius:35px;


    border:1px solid rgba(212,175,55,.35);


    box-shadow:

    0 30px 80px rgba(0,0,0,.7);


    padding:70px 40px;

}/* ==========================================
   PREMIUM SECONDARY TRUST BACKGROUND
   Testimonials / FAQ / Trust Sections
========================================== */


#testimonials,
#why-us,
#faq,
#cta {

    position: relative;

    overflow: hidden;


    background:

    linear-gradient(
        rgba(0,0,0,0.80),
        rgba(0,0,0,0.90)
    ),

    url("trust-background.png");


    background-size: cover;

    background-position: center;


    background-attachment: fixed;


    border-radius: 35px;


    border: 1px solid rgba(212,175,55,0.35);


    box-shadow:

    0 30px 80px rgba(0,0,0,0.8);


    padding: 70px 40px;

}/* ==========================================
   TESTIMONIALS + WHY US + FAQ BACKGROUND
   SINGLE LARGE IMAGE AREA
========================================== */


#testimonials,
#why-us,
#faq {

    position: relative;

    background: transparent !important;

}


/* Create the large shared background area */

#testimonials::before {

    content:"";

    position:absolute;

    top:-50px;

    bottom:-900px;

    left:50%;

    width:100vw;

    transform:translateX(-50%);


    background:

    linear-gradient(
        rgba(0,0,0,.82),
        rgba(0,0,0,.90)
    ),

    url("background.png");


    background-size:cover;

    background-position:center;


    z-index:-1;


    border-radius:50px;


}


/* Make cards float above the photo */

#testimonials .project,
#why-us .project,
#faq .project {

    position:relative;

    z-index:2;

}


/* Remove old section backgrounds */

#testimonials,
#why-us,
#faq {

    padding-top:70px;

    padding-bottom:70px;

}/* ==========================================
   FIX ALL TRUST SECTION BACKGROUNDS
   ONE SINGLE background.png ONLY
========================================== */


/* Remove individual backgrounds */

#testimonials,
#why-us,
#faq {

    background: transparent !important;

    background-image: none !important;

    box-shadow: none;

}



/* Create ONE shared background behind all three */

#testimonials::before {

    content:"";

    position:absolute;

    z-index:-1;


    top:-80px;

    bottom:-120px;


    left:50%;

    width:100vw;


    transform:translateX(-50%);


    background:

    linear-gradient(
        rgba(0,0,0,.82),
        rgba(0,0,0,.88)
    ),

    url("background.png");


    background-size:cover;

    background-position:center;


    border-radius:40px;


}



/* Keep sections transparent */

#testimonials,
#why-us,
#faq {

    position:relative;

    overflow:visible;

}



/* Remove old card backgrounds */

#testimonials .project,
#why-us .project,
#faq .project {

    background:

    linear-gradient(
        145deg,
        rgba(255,255,255,.10),
        rgba(0,0,0,.75)
    ) !important;

}/* ==========================================
   FINAL BACKGROUND CLEANUP
   KEEP hero.png ONLY ON HERO
========================================== */


/* Remove hero image from everything else */

#testimonials,
#why-us,
#faq,
#cta,
#contact,
#about,
#offer,
#services,
#how-it-works {

    background-image: none !important;

}



/* Put the real secondary background only here */

#testimonials,
#why-us,
#faq {

    background:

    linear-gradient(
        rgba(0,0,0,.82),
        rgba(0,0,0,.90)
    ),

    url("background.png") !important;


    background-size:cover !important;

    background-position:center !important;

}



/* Make sure hero keeps hero.png */

.hero {

    background:

    linear-gradient(
        rgba(0,0,0,.55),
        rgba(0,0,0,.85)
    ),

    url("hero.png") !important;


    background-size:cover !important;

    background-position:center !important;

}/* ==================================================
   STATON SERVICES CO.
   PREMIUM MULTI-BACKGROUND SYSTEM
================================================== */


/* MAIN TRUST / REVIEWS / FAQ AREA */
.trust-background,
#testimonials,
#why-us,
#faq {

    background:

    linear-gradient(
        rgba(0,0,0,.82),
        rgba(0,0,0,.90)
    ),

    url("trust-background.png") !important;


    background-size:cover !important;

    background-position:center !important;

}



/* SERVICES AREA */

#services {

    background:

    linear-gradient(
        rgba(0,0,0,.80),
        rgba(0,0,0,.90)
    ),

    url("background.png") !important;


    background-size:cover !important;

    background-position:center !important;


    border-radius:40px;

}



/* CONTACT AREA */

#contact {

    background:

    linear-gradient(
        rgba(0,0,0,.78),
        rgba(0,0,0,.90)
    ),

    url("contact.png") !important;


    background-size:cover !important;

    background-position:center !important;

}



/* READY TO GET STARTED / FINAL CTA */

#cta {

    background:

    linear-gradient(
        rgba(0,0,0,.75),
        rgba(0,0,0,.90)
    ),

    url("cta-background.png") !important;


    background-size:cover !important;

    background-position:center !important;

}



/* PREMIUM EXTRA SECTION */

#about {

    background:

    linear-gradient(
        rgba(0,0,0,.82),
        rgba(0,0,0,.92)
    ),

    url("premium-background.png") !important;


    background-size:cover !important;

    background-position:center !important;


    border-radius:40px;

}



/* KEEP HERO SEPARATE */

.hero {

    background:

    linear-gradient(
        rgba(0,0,0,.55),
        rgba(0,0,0,.85)
    ),

    url("hero.png") !important;


    background-size:cover !important;

    background-position:center !important;

}/* ==========================================
   FIX BOTTOM LARGE BACKGROUND
   REMOVE HERO IMAGE
   USE CTA BACKGROUND
========================================== */


#cta,
.cta-section,
.ready-section,
#ready {

    background:

    linear-gradient(
        rgba(0,0,0,.78),
        rgba(0,0,0,.90)
    ),

    url("cta-background.png") !important;


    background-size:cover !important;

    background-position:center !important;


}


/* Kill hero image leaking into lower sections */

#testimonials::before,
#why-us::before,
#faq::before,
#cta::before {

    background-image:none !important;

}/* ==========================================
   FAQ SECTION BACKGROUND CHANGE
========================================== */

#faq {

    background:

    linear-gradient(
        rgba(0,0,0,.80),
        rgba(0,0,0,.90)
    ),

    url("cta-background.png") !important;


    background-size:cover !important;

    background-position:center !important;


    border-radius:40px;

    border:1px solid rgba(212,175,55,.35);

    box-shadow:

    0 30px 80px rgba(0,0,0,.8);

}/* ==========================================
   WHAT OUR CLIENTS SAY BACKGROUND
========================================== */

#testimonials {

    background:

    linear-gradient(
        rgba(0,0,0,.80),
        rgba(0,0,0,.90)
    ),

    url("clients-background.png") !important;


    background-size:cover !important;

    background-position:center !important;


    border-radius:40px;

    border:1px solid rgba(212,175,55,.35);


    box-shadow:

    0 30px 80px rgba(0,0,0,.8);

}/* ==========================================
   READY TO GET STARTED BACKGROUND
========================================== */

#cta {

    background:

    linear-gradient(
        rgba(0,0,0,.75),
        rgba(0,0,0,.90)
    ),

    url("ready-background.png") !important;


    background-size:cover !important;

    background-position:center !important;


    border-radius:40px;

    border:1px solid rgba(212,175,55,.45);


    box-shadow:

    0 30px 90px rgba(0,0,0,.85);


    padding:100px 40px;

}/* ==========================================
   FINAL TESTIMONIAL + CTA BACKGROUND FIX
========================================== */


/* WHAT OUR CLIENTS SAY */

#testimonials {

    min-height:500px !important;

    background-image:
    linear-gradient(
        rgba(0,0,0,.55),
        rgba(0,0,0,.75)
    ),
    url("testimonials-background.png") !important;


    background-size:cover !important;

    background-position:center !important;

    background-repeat:no-repeat !important;

}



/* READY TO GET STARTED */

#cta {

    min-height:500px !important;

    background-image:
    linear-gradient(
        rgba(0,0,0,.55),
        rgba(0,0,0,.75)
    ),
    url("ready-background.png") !important;


    background-size:cover !important;

    background-position:center !important;

    background-repeat:no-repeat !important;

}/* ==========================================
   READY TO GET STARTED FINAL FIX
========================================== */

#cta {

    min-height:500px !important;

    position:relative !important;

    overflow:hidden !important;


    background-image:
    linear-gradient(
        rgba(0,0,0,.55),
        rgba(0,0,0,.75)
    ),
    url("ready-background.png") !important;


    background-size:cover !important;

    background-position:center !important;

    background-repeat:no-repeat !important;

}#cta {

    background:
    linear-gradient(
        rgba(0,0,0,.55),
        rgba(0,0,0,.75)
    ),
    url("final-cta.png") !important;

    background-size:cover !important;
    background-position:center !important;

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

.contact-form {
    max-width: 700px;
    margin: 50px auto 0;
    padding: 35px;
    background: rgba(20, 20, 20, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

.form-group {
    margin-bottom: 20px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 16px 18px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(212,175,55,.25);
    border-radius: 12px;
    color: #fff;
    font-size: 1rem;
    transition: .3s ease;
    box-sizing: border-box;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(255,255,255,.65);
}

.contact-form select {
    color: #fff;
}

.contact-form option {
    background: #111;
    color: #fff;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #d4af37;
    box-shadow: 0 0 18px rgba(212,175,55,.35);
    background: rgba(255,255,255,.08);
}

.contact-form textarea {
    resize: vertical;
    min-height: 160px;
}

.contact-form .button {
    width: 100%;
    margin-top: 10px;
    cursor: pointer;
}