:root{

--bg:#f7f5f2;
--surface:#ffffff;
--text:#232323;
--muted:#666;
--primary:#d98b72;
--primary-hover:#c6765d;
--border:#e8e3dc;
--shadow:0 18px 45px rgba(0,0,0,.08);
--radius:18px;
--container:1180px;

}

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

html{
scroll-behavior:smooth;
}

body{

font-family:"Manrope",sans-serif;
background:var(--bg);
color:var(--text);
line-height:1.7;
-webkit-font-smoothing:antialiased;

}

img{

display:block;
max-width:100%;
height:auto;

}

.container{

width:min(100% - 40px,var(--container));
margin:auto;

}

.narrow{

max-width:860px;

}

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

header{

padding:80px 0;

}

.hero{

display:grid;
grid-template-columns:1.05fr .95fr;
gap:70px;
align-items:center;

}

.badge{

display:inline-block;
padding:8px 16px;
border-radius:999px;
background:#fff;
border:1px solid var(--border);
font-size:.9rem;
font-weight:700;
margin-bottom:26px;

}

h1{

font-size:clamp(2.6rem,6vw,3.8rem);
line-height:1.05;
font-weight:800;
margin-bottom:24px;
word-break:break-word;

}

h1 span{

color:var(--primary);

}

.domain-name{
white-space:nowrap;
}

.lead{

font-size:1.15rem;
color:var(--muted);
max-width:620px;

}

.hero-points{

display:flex;
flex-wrap:wrap;
gap:12px;
margin:30px 0 20px 0;

}

.hero-points span{

background:#fff;
border:1px solid var(--border);
padding:10px 14px;
border-radius:999px;
font-size:.92rem;
font-weight:600;

}

.valuation-block{

margin-top:20px;
margin-bottom:15px;

}

.valuation-label{

font-size:0.78rem;
font-weight:700;
letter-spacing:0.08em;
color:var(--muted);
text-transform:uppercase;

}

.valuation-price{

font-size:2.4rem;
font-weight:800;
color:var(--text);
line-height:1.1;
margin-top:2px;

}

.buttons{

display:flex;
flex-wrap:wrap;
gap:16px;
margin-top:10px;

}

.btn{

display:inline-flex;
align-items:center;
justify-content:center;
padding:15px 28px;
border-radius:999px;
text-decoration:none;
font-weight:700;
cursor:pointer;
transition:.25s;
border:none;
font-size:1rem;

}

.btn-primary{

background:var(--primary);
color:#fff;

}

.btn-primary:hover{

background:var(--primary-hover);
transform:translateY(-2px);

}

.btn-secondary{

background:#fff;
border:1px solid var(--border);
color:var(--text);

}

.btn-secondary:hover{

background:#f3f3f3;

}

.hero-note{

margin-top:18px;
font-size:.9rem;
color:#888;

}

.hero-image img{

border-radius:28px;
box-shadow:var(--shadow);

}

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

section{

padding:90px 0;

}

h2{

font-size:2.2rem;
margin-bottom:22px;
text-align:center;

}

section>div>p{

text-align:center;
color:var(--muted);
max-width:760px;
margin:0 auto 50px;

}

.features{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;

}

.features div,
.card{

background:#fff;
border:1px solid var(--border);
border-radius:var(--radius);
padding:28px;
box-shadow:0 6px 18px rgba(0,0,0,.04);
transition:.25s;

}

.features div:hover,
.card:hover{

transform:translateY(-4px);

}

.features h3,
.card h3{

margin-bottom:12px;
font-size:1.2rem;

}

.features p,
.card p{

color:var(--muted);

}

.cards{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;

}

.market{

background:#fff;

}

.cta{

text-align:center;

}

.cta .btn{

margin-top:26px;

}

/* ---------------- FOOTER ---------------- */

footer{

padding:40px 0;
border-top:1px solid var(--border);
text-align:center;
color:#777;

}

/* ---------------- MODAL ---------------- */

.modal{

position:fixed;
inset:0;
background:rgba(0,0,0,.55);
display:flex;
align-items:center;
justify-content:center;
padding:20px;
opacity:0;
visibility:hidden;
transition:.25s;
z-index:1000;

}

.modal.show{

opacity:1;
visibility:visible;

}

.modal-box{

width:100%;
max-width:520px;
background:#fff;
border-radius:22px;
padding:34px;
position:relative;
box-shadow:var(--shadow);

}

.close{

position:absolute;
top:18px;
right:18px;
border:none;
background:none;
font-size:30px;
cursor:pointer;
color:#777;

}

.modal h2{

text-align:left;
margin-bottom:24px;

}

.modal input,
.modal textarea{

width:100%;
padding:15px;
margin-bottom:16px;
border:1px solid var(--border);
border-radius:12px;
font:inherit;
outline:none;

}

.modal input:focus,
.modal textarea:focus{

border-color:var(--primary);

}

.modal .btn{

width:100%;

}

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

@media (max-width:960px){

.hero{

grid-template-columns:1fr;
gap:45px;
text-align:center;

}

.lead{

margin:auto;

}

.hero-points{

justify-content:center;

}

.buttons{

justify-content:center;

}

.features,
.cards{

grid-template-columns:1fr 1fr;

}

}

@media (max-width:640px){

.container{

width:min(100% - 24px,var(--container));

}

header{

padding:50px 0;

}

section{

padding:65px 0;

}

h2{

font-size:1.8rem;

}

.features,
.cards{

grid-template-columns:1fr;

}

.modal-box{

padding:26px;

}

/* Fix text overflow for long domain names on mobile screens */
h1 {
font-size: clamp(1.8rem, 8vw, 2.5rem);
}

.domain-name {
white-space: normal;
word-break: break-word;
}

}