/* ==========================================================
   REALTY+
   Main Stylesheet
   Part 1/4
   ========================================================== */

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

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

    background:#ffffff;
    color:#0f172a;
    line-height:1.6;
    overflow-x:hidden;
}

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

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

button{
    border:none;
    background:none;
    font-family:inherit;
    cursor:pointer;
}

ul{
    list-style:none;
}

section{
    padding:110px 0;
}

.container{

    width:min(1180px,92%);
    margin:auto;

}

/* =========================
   COLORS
========================= */

:root{

--primary:#2563eb;
--primary-dark:#1d4ed8;

--green:#22c55e;
--green-dark:#16a34a;

--white:#ffffff;

--bg:#f8fafc;

--text:#0f172a;

--muted:#64748b;

--border:#e2e8f0;

--shadow:

0 20px 45px rgba(15,23,42,.08);

--radius:20px;

--transition:.35s ease;

}

/* =========================
   TYPOGRAPHY
========================= */

h1{

font-size:64px;
line-height:1.05;
font-weight:800;
letter-spacing:-2px;

}

h2{

font-size:44px;
line-height:1.15;
font-weight:700;

}

h3{

font-size:24px;
font-weight:700;

}

h4{

font-size:18px;
font-weight:600;

}

p{

font-size:18px;
color:var(--muted);

}

.section-title{

max-width:760px;
margin:auto;
text-align:center;
margin-bottom:70px;

}

.section-title span{

display:inline-flex;

padding:8px 16px;

border-radius:999px;

background:#ecfdf5;

color:var(--green-dark);

font-weight:700;

margin-bottom:18px;

font-size:15px;

}

.section-title h2{

margin-bottom:18px;

}

/* =========================
   BUTTONS
========================= */

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:16px 30px;

border-radius:999px;

font-weight:700;

transition:var(--transition);

}

.btn-primary{

background:linear-gradient(
135deg,
var(--primary),
#3b82f6
);

color:#fff;

box-shadow:

0 12px 28px rgba(37,99,235,.25);

}

.btn-primary:hover{

transform:translateY(-4px);

box-shadow:

0 20px 45px rgba(37,99,235,.35);

}

.btn-secondary{

background:#fff;

color:var(--primary);

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

}

.btn-secondary:hover{

background:#f8fafc;

transform:translateY(-3px);

}

.btn-outline{

background:transparent;

border:2px solid var(--primary);

color:var(--primary);

}

.btn-outline:hover{

background:var(--primary);

color:#fff;

}

/* =========================
   HEADER
========================= */

.header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

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

backdrop-filter:blur(18px);

border-bottom:1px solid rgba(226,232,240,.7);

transition:var(--transition);

}

.navbar{

height:84px;

display:flex;

align-items:center;

justify-content:space-between;

}

.logo{

display:flex;

align-items:center;

gap:14px;

font-weight:800;

font-size:24px;

}

.logo-box{

width:46px;

height:46px;

border-radius:14px;

background:linear-gradient(
135deg,
var(--primary),
var(--green)
);

display:flex;

align-items:center;

justify-content:center;

font-weight:800;

color:#fff;

font-size:20px;

box-shadow:

0 12px 24px rgba(37,99,235,.20);

}

.nav-menu{

display:flex;

align-items:center;

gap:36px;

}

.nav-menu a{

font-weight:600;

color:#475569;

transition:var(--transition);

position:relative;

}

.nav-menu a:hover{

color:var(--primary);

}

.nav-menu a.active{

color:var(--primary);

}

.nav-menu a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--primary);

transition:.3s;

}

.nav-menu a:hover::after{

width:100%;

}

.nav-actions{

display:flex;

gap:14px;

align-items:center;

}

.hamburger{

display:none;

flex-direction:column;

gap:6px;

cursor:pointer;

}

.hamburger span{

width:26px;

height:2px;

background:#0f172a;

transition:.3s;

}

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

.hero{

padding-top:180px;

padding-bottom:120px;

position:relative;

overflow:hidden;

background:

radial-gradient(
circle at top left,
rgba(37,99,235,.10),
transparent 40%
),

radial-gradient(
circle at top right,
rgba(34,197,94,.08),
transparent 35%
),

#ffffff;

}

.hero-grid{

display:grid;

grid-template-columns:

1.05fr
0.95fr;

align-items:center;

gap:80px;

}

.badge{

display:inline-flex;

align-items:center;

padding:10px 18px;

border-radius:999px;

background:#ecfdf5;

color:#15803d;

font-weight:700;

margin-bottom:26px;

font-size:15px;

}

.hero-left p{

margin-top:24px;

max-width:620px;

}

.hero-buttons{

display:flex;

gap:18px;

margin-top:40px;

flex-wrap:wrap;

}

.hero-stats{

display:flex;

gap:20px;

margin-top:60px;

flex-wrap:wrap;

}

.stat-card{

background:#fff;

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

border-radius:18px;

padding:26px;

min-width:170px;

box-shadow:var(--shadow);

transition:var(--transition);

}

.stat-card:hover{

transform:translateY(-8px);

}

.stat-card h2{

font-size:34px;

color:var(--primary);

margin-bottom:6px;

}

.stat-card span{

font-size:15px;

color:var(--muted);

}

/* =========================
   HERO CHAT CARD
========================= */

.hero-right{

display:flex;

justify-content:center;

}

.chat-card{

width:100%;

max-width:470px;

background:#fff;

border-radius:28px;

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

box-shadow:

0 30px 60px rgba(15,23,42,.10);

overflow:hidden;

}

.chat-header{

display:flex;

align-items:center;

gap:12px;

padding:22px;

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

font-weight:700;

background:#fbfdff;

}

.status-dot{

width:12px;

height:12px;

border-radius:50%;

background:var(--green);

box-shadow:

0 0 0 6px rgba(34,197,94,.15);

}

.chat-body{

padding:24px;

display:flex;

flex-direction:column;

gap:18px;

background:#f8fafc;

}

.message{

max-width:82%;

padding:14px 18px;

border-radius:18px;

font-size:15px;

line-height:1.5;

}

.received{

align-self:flex-start;

background:#fff;

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

}

.sent{

align-self:flex-end;

background:linear-gradient(
135deg,
var(--primary),
#3b82f6
);

color:#fff;

}

.workflow{

padding:24px;

display:flex;

flex-direction:column;

gap:12px;

background:#fff;

}

.workflow-item{

display:flex;

align-items:center;

gap:12px;

font-weight:600;

color:#334155;

padding:12px 16px;

border-radius:12px;

background:#f8fafc;

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

}
/* ==========================================================
   TRUST SECTION
========================================================== */

.trust{

background:var(--bg);

}

.trust-grid{

display:grid;

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

gap:30px;

}

.trust-card{

background:#fff;

padding:38px;

border-radius:var(--radius);

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

box-shadow:var(--shadow);

transition:var(--transition);

}

.trust-card:hover{

transform:translateY(-10px);

border-color:rgba(37,99,235,.25);

}

.trust-card h3{

margin-bottom:18px;

color:var(--text);

}

.trust-card p{

font-size:16px;

}

/* ==========================================================
   FEATURES
========================================================== */

.features-preview{

background:#fff;

}

.feature-grid{

display:grid;

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

gap:30px;

}

.feature-card{

background:#fff;

padding:38px;

border-radius:var(--radius);

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

box-shadow:var(--shadow);

transition:var(--transition);

position:relative;

overflow:hidden;

}

.feature-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

background:linear-gradient(
90deg,
var(--primary),
var(--green)
);

transform:scaleX(0);

transform-origin:left;

transition:.35s;

}

.feature-card:hover::before{

transform:scaleX(1);

}

.feature-card:hover{

transform:translateY(-12px);

box-shadow:

0 30px 60px rgba(15,23,42,.12);

}

.feature-icon{

width:68px;

height:68px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

margin-bottom:26px;

background:linear-gradient(
135deg,
rgba(37,99,235,.12),
rgba(34,197,94,.12)
);

}

.feature-card h3{

margin-bottom:18px;

}

.feature-card p{

font-size:16px;

}

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

.how-it-works{

background:var(--bg);

position:relative;

overflow:hidden;

}

.timeline{

display:grid;

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

gap:28px;

position:relative;

}

.timeline::before{

content:"";

position:absolute;

left:8%;

right:8%;

top:48px;

height:2px;

background:linear-gradient(
90deg,
var(--primary),
var(--green)
);

z-index:0;

}

.timeline-card{

position:relative;

z-index:2;

background:#fff;

padding:34px;

border-radius:var(--radius);

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

box-shadow:var(--shadow);

transition:var(--transition);

}

.timeline-card:hover{

transform:translateY(-10px);

}

.timeline-number{

width:62px;

height:62px;

border-radius:50%;

background:linear-gradient(
135deg,
var(--primary),
var(--green)
);

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

font-weight:700;

color:#fff;

margin-bottom:24px;

box-shadow:

0 15px 35px rgba(37,99,235,.25);

}

.timeline-card h3{

margin-bottom:18px;

}

.timeline-card p{

font-size:16px;

}

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

.benefits{

background:#fff;

}

.benefit-grid{

display:grid;

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

gap:30px;

}

.benefit-card{

padding:42px;

border-radius:var(--radius);

background:linear-gradient(
180deg,
#ffffff,
#fbfdff
);

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

box-shadow:var(--shadow);

transition:var(--transition);

}

.benefit-card:hover{

transform:translateY(-10px);

}

.benefit-card h3{

margin-bottom:18px;

position:relative;

padding-left:26px;

}

.benefit-card h3::before{

content:"";

position:absolute;

left:0;

top:10px;

width:10px;

height:10px;

border-radius:50%;

background:var(--green);

box-shadow:

0 0 0 8px rgba(34,197,94,.12);

}

.benefit-card p{

font-size:16px;

}

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

.cta{

padding:120px 0;

background:linear-gradient(
135deg,
#2563eb,
#1d4ed8
);

position:relative;

overflow:hidden;

}

.cta::before{

content:"";

position:absolute;

width:420px;

height:420px;

border-radius:50%;

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

top:-180px;

right:-120px;

}

.cta::after{

content:"";

position:absolute;

width:320px;

height:320px;

border-radius:50%;

background:rgba(34,197,94,.08);

bottom:-120px;

left:-100px;

}

.cta-box{

position:relative;

z-index:2;

max-width:860px;

margin:auto;

text-align:center;

}

.cta-box h2{

color:#fff;

margin-bottom:24px;

}

.cta-box p{

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

font-size:20px;

max-width:700px;

margin:auto;

margin-bottom:42px;

}

.cta-buttons{

display:flex;

justify-content:center;

gap:18px;

flex-wrap:wrap;

}

.cta .btn-primary{

background:#fff;

color:var(--primary);

}

.cta .btn-primary:hover{

background:#f8fafc;

}

.cta .btn-secondary{

background:transparent;

color:#fff;

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

}

.cta .btn-secondary:hover{

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

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

.faq{

background:var(--bg);

}

.faq-container{

max-width:900px;

margin:auto;

display:flex;

flex-direction:column;

gap:18px;

}

.faq-item{

background:#fff;

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

border-radius:18px;

overflow:hidden;

box-shadow:var(--shadow);

transition:var(--transition);

}

.faq-item:hover{

transform:translateY(-4px);

}

.faq-question{

width:100%;

padding:24px 28px;

display:flex;

justify-content:space-between;

align-items:center;

font-size:18px;

font-weight:700;

text-align:left;

color:var(--text);

cursor:pointer;

}

.faq-question::after{

content:"+";

font-size:24px;

font-weight:500;

color:var(--primary);

transition:var(--transition);

}

.faq-item.active .faq-question::after{

transform:rotate(45deg);

}

.faq-answer{

max-height:0;

overflow:hidden;

transition:max-height .35s ease;

}

.faq-answer p{

padding:0 28px 24px;

font-size:16px;

}

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

.footer{

background:#0f172a;

padding:90px 0 40px;

color:#cbd5e1;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:60px;

margin-bottom:70px;

}

.footer-logo{

display:flex;

align-items:center;

gap:14px;

margin-bottom:24px;

font-size:24px;

font-weight:800;

color:#fff;

}

.footer .logo-box{

box-shadow:none;

}

.footer h4{

color:#fff;

margin-bottom:24px;

}

.footer a{

display:block;

margin-bottom:14px;

color:#94a3b8;

transition:var(--transition);

}

.footer a:hover{

color:#fff;

padding-left:6px;

}

.footer p{

color:#94a3b8;

font-size:16px;

margin-bottom:18px;

}

.footer-bottom{

padding-top:34px;

border-top:1px solid rgba(255,255,255,.08);

display:flex;

justify-content:space-between;

align-items:flex-start;

gap:30px;

flex-wrap:wrap;

}

.footer-bottom p{

font-size:14px;

max-width:650px;

margin:0;

}

/* ==========================================================
   COMMON CARD
========================================================== */

.card{

background:#fff;

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

border-radius:var(--radius);

padding:40px;

box-shadow:var(--shadow);

transition:var(--transition);

}

.card:hover{

transform:translateY(-8px);

}

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

.page-hero{

padding-top:180px;

padding-bottom:110px;

background:

radial-gradient(circle at left top,
rgba(37,99,235,.08),
transparent 40%),

radial-gradient(circle at right top,
rgba(34,197,94,.08),
transparent 35%),

#fff;

text-align:center;

}

.page-hero h1{

max-width:900px;

margin:auto;

margin-bottom:24px;

}

.page-hero p{

max-width:760px;

margin:auto;

font-size:20px;

}

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

.contact-section{

background:var(--bg);

}

.contact-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

align-items:start;

}

.contact-card{

background:#fff;

padding:42px;

border-radius:var(--radius);

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

box-shadow:var(--shadow);

}

.contact-card h3{

margin-bottom:20px;

}

.contact-item{

margin-bottom:28px;

}

.contact-item h4{

margin-bottom:8px;

color:var(--primary);

}

.contact-form{

display:flex;

flex-direction:column;

gap:22px;

}

.contact-form input,

.contact-form textarea,

.contact-form select{

width:100%;

padding:18px 20px;

border-radius:14px;

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

background:#fff;

font-size:16px;

font-family:inherit;

transition:var(--transition);

outline:none;

}

.contact-form textarea{

min-height:180px;

resize:vertical;

}

.contact-form input:focus,

.contact-form textarea:focus,

.contact-form select:focus{

border-color:var(--primary);

box-shadow:

0 0 0 4px rgba(37,99,235,.10);

}

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

.company-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

align-items:center;

}

.company-card{

padding:40px;

border-radius:var(--radius);

background:#fff;

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

box-shadow:var(--shadow);

}

.company-card ul{

margin-top:24px;

display:flex;

flex-direction:column;

gap:18px;

}

.company-card li{

display:flex;

align-items:flex-start;

gap:12px;

color:var(--muted);

}

.company-card li::before{

content:"✓";

font-weight:700;

color:var(--green);

margin-top:1px;

}

/* ==========================================================
   FEATURE PAGE
========================================================== */

.feature-section{

background:#fff;

}

.feature-row{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

margin-bottom:110px;

}

.feature-row:last-child{

margin-bottom:0;

}

.feature-content h2{

margin-bottom:20px;

}

.feature-content p{

margin-bottom:26px;

}

.feature-content ul{

display:flex;

flex-direction:column;

gap:16px;

}

.feature-content li{

display:flex;

gap:12px;

color:var(--muted);

}

.feature-content li::before{

content:"✔";

color:var(--green);

font-weight:700;

}

.feature-visual{

background:linear-gradient(
135deg,
rgba(37,99,235,.08),
rgba(34,197,94,.08)
);

border-radius:30px;

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

min-height:420px;

display:flex;

align-items:center;

justify-content:center;

padding:40px;

box-shadow:var(--shadow);

}
/* ==========================================================
   PRIVACY & TERMS PAGES
========================================================== */

.legal-section{

background:var(--bg);

}

.legal-container{

max-width:900px;

margin:auto;

background:#fff;

padding:60px;

border-radius:var(--radius);

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

box-shadow:var(--shadow);

}

.legal-container h2{

font-size:32px;

margin-top:50px;

margin-bottom:18px;

}

.legal-container h2:first-child{

margin-top:0;

}

.legal-container h3{

font-size:22px;

margin-top:32px;

margin-bottom:14px;

}

.legal-container p{

margin-bottom:18px;

font-size:17px;

line-height:1.9;

}

.legal-container ul{

margin:20px 0 30px 22px;

list-style:disc;

}

.legal-container li{

margin-bottom:12px;

color:var(--muted);

line-height:1.8;

}

/* ==========================================================
   TABLE
========================================================== */

.table-wrapper{

overflow-x:auto;

margin:30px 0;

}

table{

width:100%;

border-collapse:collapse;

}

th{

background:var(--primary);

color:#fff;

font-weight:700;

padding:18px;

text-align:left;

}

td{

padding:18px;

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

font-size:16px;

color:var(--muted);

}

tr:nth-child(even){

background:#f8fafc;

}

/* ==========================================================
   BADGES
========================================================== */

.badge-blue{

display:inline-flex;

align-items:center;

padding:8px 18px;

border-radius:999px;

background:rgba(37,99,235,.10);

color:var(--primary);

font-weight:700;

font-size:14px;

}

.badge-green{

display:inline-flex;

align-items:center;

padding:8px 18px;

border-radius:999px;

background:rgba(34,197,94,.12);

color:var(--green-dark);

font-weight:700;

font-size:14px;

}

/* ==========================================================
   DIVIDERS
========================================================== */

.divider{

width:100%;

height:1px;

background:var(--border);

margin:70px 0;

}

/* ==========================================================
   UTILITIES
========================================================== */

.text-center{

text-align:center;

}

.text-left{

text-align:left;

}

.mt-20{

margin-top:20px;

}

.mt-30{

margin-top:30px;

}

.mt-40{

margin-top:40px;

}

.mt-60{

margin-top:60px;

}

.mb-20{

margin-bottom:20px;

}

.mb-40{

margin-bottom:40px;

}

.mb-60{

margin-bottom:60px;

}

.w-100{

width:100%;

}

.hidden{

display:none;

}

.shadow{

box-shadow:var(--shadow);

}

.radius{

border-radius:var(--radius);

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#eef2f7;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(
180deg,
var(--primary),
var(--green)
);

border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--primary);

}

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

::selection{

background:rgba(37,99,235,.18);

color:var(--text);

}

/* ==========================================================
   FOCUS
========================================================== */

:focus-visible{

outline:3px solid rgba(37,99,235,.25);

outline-offset:3px;

}

/* ==========================================================
   SMOOTH TRANSITIONS
========================================================== */

a,
button,
input,
textarea,
select,
.card,
.feature-card,
.trust-card,
.timeline-card,
.benefit-card,
.stat-card,
.contact-card{

transition:all .3s ease;

}

/* ==========================================================
   IMAGE HELPERS
========================================================== */

.img-fluid{

width:100%;

height:auto;

display:block;

}

.rounded{

border-radius:24px;

}

.object-cover{

object-fit:cover;

}

/* ==========================================================
   SPACING HELPERS
========================================================== */

.py-0{

padding-top:0;

padding-bottom:0;

}

.py-60{

padding-top:60px;

padding-bottom:60px;

}

.py-80{

padding-top:80px;

padding-bottom:80px;

}

.py-120{

padding-top:120px;

padding-bottom:120px;

}

/* ==========================================================
   END OF FILE
========================================================== */