/* ==========================================================
   LEGAL CONSULTATION CONVERSION SYSTEM
   VERSION 1.0
   Clone Template
========================================================== */

/* ==========================================================
   CLIENT VARIABLES
========================================================== */

:root{

    --primary:#0F3D6E;
    --primary-dark:#082746;

    --accent:#D4AF37;

    --text:#1D1D1D;

    --light:#F7F8FA;

    --white:#FFFFFF;

    --border:#E6E6E6;

    --container:1140px;

    --radius:18px;

    --shadow:0 18px 45px rgba(0,0,0,.08);

}

/* ==========================================================
   RESET
========================================================== */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:#ffffff;

    color:var(--text);

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

    line-height:1.65;

    font-size:18px;

}

/* ==========================================================
   LAYOUT
========================================================== */

.container{

    width:min(92%,var(--container));

    margin:auto;

}

section{

    padding:80px 0;

}

/* ==========================================================
   LOGO
========================================================== */

header{

    padding:40px 0;

}

.logo{

    max-width:220px;

    display:block;

}

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

.hero{

    text-align:center;

    padding:70px 0 90px;

}

.eyebrow{

    display:inline-block;

    background:#eef5fb;

    color:var(--primary);

    padding:8px 18px;

    border-radius:999px;

    font-size:14px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    margin-bottom:24px;

}

.hero h1{

    font-size:clamp(42px,6vw,68px);

    line-height:1.08;

    max-width:900px;

    margin:auto;

    font-weight:800;

}

.subheadline{

    max-width:720px;

    margin:30px auto;

    font-size:22px;

    color:#555;

}

/* ==========================================================
   BUTTON
========================================================== */

.btn{

    display:inline-block;

    background:var(--primary);

    color:white;

    text-decoration:none;

    padding:18px 42px;

    border-radius:999px;

    font-size:20px;

    font-weight:700;

    transition:.25s;

    box-shadow:var(--shadow);

}

.btn:hover{

    background:var(--primary-dark);

    transform:translateY(-2px);

}

/* ==========================================================
   TRUST BOXES
========================================================== */

.trust{

    display:grid;

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

    gap:24px;

    margin-bottom:40px;

}

.trust-box{

    background:var(--light);

    padding:28px;

    border-radius:var(--radius);

    text-align:center;

    font-weight:600;

}

/* ==========================================================
   BENEFITS
========================================================== */

.benefits h2{

    text-align:center;

    font-size:42px;

    margin-bottom:60px;

}

.steps{

    display:grid;

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

    gap:30px;

}

.step{

    background:white;

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

    border-radius:var(--radius);

    padding:40px;

    box-shadow:var(--shadow);

}

.number{

    width:52px;

    height:52px;

    border-radius:50%;

    background:var(--primary);

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    margin-bottom:24px;

}

.step h3{

    margin-bottom:14px;

    font-size:24px;

}

.step p{

    color:#666;

}

/* ==========================================================
   EVALUATION
========================================================== */

#evaluation{

    background:var(--light);

    border-radius:24px;

    padding:70px;

    margin:80px 0;

}

#evaluation h2{

    text-align:center;

    font-size:42px;

    margin-bottom:20px;

}

.evaluation-copy{

    text-align:center;

    color:#666;

    margin-bottom:50px;

}

/* ==========================================================
   EMBED PLACEHOLDER
========================================================== */

.embed-placeholder{

    border:3px dashed #cccccc;

    background:white;

    border-radius:20px;

    padding:90px 40px;

    text-align:center;

}

.embed-placeholder h3{

    margin-bottom:18px;

}

/* ==========================================================
   CALENDAR
========================================================== */

.calendar{

    margin-top:40px;

}

.calendar h2{

    text-align:center;

    font-size:40px;

    margin-bottom:20px;

}

.calendar p{

    text-align:center;

    margin-bottom:40px;

    color:#666;

}

/* ==========================================================
   FAQ
========================================================== */

.faq h2{

    text-align:center;

    margin-bottom:60px;

    font-size:42px;

}

.faq-item{

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

    padding:30px 0;

}

.faq-item h3{

    margin-bottom:12px;

    font-size:22px;

}

.faq-item p{

    color:#666;

}

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

footer{

    padding:80px 0 40px;

    text-align:center;

    color:#777;

    font-size:15px;

}

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

@media(max-width:900px){

.trust{

grid-template-columns:1fr;

}

.steps{

grid-template-columns:1fr;

}

#evaluation{

padding:40px 24px;

}

.hero{

padding:40px 0;

}

.hero h1{

font-size:42px;

}

.subheadline{

font-size:20px;

}

.btn{

display:block;

width:100%;

text-align:center;

}

}