/* ==========================
   BASE
========================== */

:root {
    --bg: #0f1012;
    --gold: #d4af37;
    --text: #e8e8e8;
    --gray: #9a9a9a;
    --dark-gray: #666;
}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;
    padding: 0;

    background: var(--bg);
    color: var(--text);

    font-family: Arial, Helvetica, sans-serif;

    line-height: 1.8;

}



h1,
h2,
h3 {

    font-family: Georgia, "Times New Roman", serif;

    font-weight: 300;

    letter-spacing: 0.02em;

    margin-top: 0;

}


p {
    margin-top: 0;
}


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




.container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding-left: 24px;

    padding-right: 24px;

}




.center {
    text-align: center;
}




.gold,
span {

    color: var(--gold);

}




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


.hero {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 80px 20px;


    background:

    radial-gradient(
    ellipse at top center,
    rgba(212,175,55,.10),
    transparent 70%
    );

}



.hero h1 {

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

    line-height: 1.15;

    color: var(--gold);

    margin-bottom: 40px;

}




.subtitle {

    font-size: 24px;

    color: #aaa;

    margin-bottom: 20px;

}



.description {

    font-size: 18px;

    color: #777;

    margin-bottom: 50px;

}




.divider {

    width: 80px;

    height: 1px;

    background: var(--gold);

    margin: 0 auto 35px;

}


.divider.left {

    margin-left:0;

}




.button {

    display:inline-block;

    padding:20px 50px;

    background:

    linear-gradient(
    135deg,
    #d4af37,
    #b8941f
    );


    color:#111;

    text-transform:uppercase;

    letter-spacing:.08em;

    font-size:14px;

    transition:.3s;

}



.button:hover {

    transform:translateY(-4px);

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

}




.arrow {

    margin-top:80px;

    font-size:30px;

    color:var(--gold);

}





/* ==========================
 SECTIONS
========================== */


.section {

    padding:120px 0;

}



.section-title {

    text-align:center;

    margin-bottom:70px;

}



.section-title h2,
.section h2 {

    font-size:clamp(38px,5vw,70px);

    color:var(--gold);

}



.section-title p {

    color:#999;

    font-size:20px;

}




/* ==========================
 CARDS
========================== */


.cards {

    display:grid;

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

    gap:40px;

}




.card {

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


    border:

    1px solid

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


    padding:45px 35px;


    transition:.4s;

}



.card:hover {

    transform:translateY(-8px);

    border-color:
    rgba(212,175,55,.5);

}




.card h3 {

    color:var(--gold);

    font-size:32px;

}



.card p {

    color:#999;

}



.card .small,
.small {

    font-size:15px;

    color:#777;

}



.number {

    font-family:Georgia,serif;

    font-size:80px;

    color:

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

    line-height:1;

    margin-bottom:20px;

}





/* ==========================
 METHOD
========================== */


.method-section {

    background:

    linear-gradient(
    transparent,
    rgba(0,0,0,.3),
    transparent
    );

}



.method-list {

    max-width:900px;

    margin:auto;

}



.method-item {

    border-left:

    2px solid

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


    padding-left:40px;

    margin-bottom:70px;

    position:relative;

}



.method-item:before {

    content:"";

    position:absolute;

    left:-7px;

    top:0;

    width:12px;

    height:12px;

    border-radius:50%;

    background:var(--gold);

}



.method-item h3 {

    color:var(--gold);

    font-size:38px;

}



.method-item h4 {

    color:#aaa;

    font-size:20px;

    font-weight:normal;

}



.method-item p {

    color:#888;

}




/* ==========================
 ABOUT
========================== */


.about {

    display:grid;

    grid-template-columns:1fr 1.5fr;

    gap:70px;

    align-items:center;

}



.about-image img {

    width:100%;

    border:

    1px solid

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

}



.about-text p {

    color:#999;

    font-size:18px;

}



.quote {

    font-style:italic;

    color:#777!important;

}





/* ==========================
 CTA
========================== */


.cta {

    background:

    linear-gradient(
    transparent,
    rgba(0,0,0,.35),
    transparent
    );

}



.steps {

    margin:50px auto;

    max-width:800px;

}



.step {

    display:flex;

    gap:25px;

    text-align:left;

    padding:25px 0;

}



.step strong {

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:

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

    color:var(--gold);

    flex-shrink:0;

}



.step h3 {

    color:var(--gold);

    font-size:24px;

}



.step p {

    color:#888;

}





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


.contact-cards {

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

}



footer {

    padding:50px 0;

    border-top:

    1px solid

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

}



footer p {

    color:#666;

}




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


.fade {

    opacity:0;

    transform:translateY(40px);

    transition:

    .8s ease;

}


.fade.visible {

    opacity:1;

    transform:none;

}





/* ==========================
 MOBILE
========================== */


@media(max-width:768px){


.container {

    padding-left:18px;

    padding-right:18px;

}



.section {

    padding:70px 0;

}



.hero h1 {

    font-size:38px;

}



.subtitle {

    font-size:18px;

}



.description {

    font-size:16px;

}



.button {

    padding:18px 35px;

}



.cards,
.contact-cards {

    grid-template-columns:1fr;

}



.card {

    padding:28px 22px;

}



.number {

    font-size:55px;

}



.method-item {

    padding-left:25px;

}



.method-item h3 {

    font-size:30px;

}



.about {

    grid-template-columns:1fr;

    gap:40px;

}



.about-text p {

    font-size:16px;

}



.step {

    gap:15px;

}



.step h3 {

    font-size:20px;

}


}