:root{
--blue:#1f6feb;
--glass:rgba(255,255,255,.07);
--border:rgba(255,255,255,.15);
}

/* GLOBAL */
body{
margin:0;
font-family:Inter,system-ui,Arial;
color:#e5e7eb;
min-height:100vh;
background:linear-gradient(to top,
#020617 0%,
#081825 30%,
#0a2540 60%,
#0b1220 100%);
background-attachment:fixed;
}

/* HEADER */
header{
text-align:center;
padding:90px 20px 60px;
}
header h1{
font-size:52px;
margin-bottom:10px;
}
header p{opacity:.85}

/* NAV */
nav{
display:flex;
justify-content:center;
gap:28px;
margin-top:30px;
flex-wrap:wrap;
}
nav a{
color:#c7d2fe;
text-decoration:none;
font-weight:500;
position:relative;
cursor:pointer;
}
nav a::after{
content:''; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--blue); transition:.3s;
}
nav a:hover::after{width:100%}

/* CONTAINER */
.container{
max-width:1150px;
margin:auto;
padding:50px 20px;
background:var(--glass);
backdrop-filter:blur(10px);
border-radius:26px;
border:1px solid var(--border);
}

/* SEARCH */
.search {
    width: 100%;
    max-width: 600px; /* أقصى عرض للبحث */
    padding: 14px 18px;
    border-radius: 12px;
    border: none;
    margin-bottom: 40px;
    font-size: 16px;
    outline: none;
    box-sizing: border-box;
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/* DOMAINS */
.domains{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:28px;
}
.card{
background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.02));
padding:26px;
border-radius:20px;
border:1px solid var(--border);
transition:.35s;
}
.card:hover{
transform:translateY(-6px);
box-shadow:0 20px 40px rgba(0,0,0,.4);
}
.card h3{color:#93c5fd;margin-bottom:8px}
.price{font-weight:700;font-size:18px}

/* CTA */
.cta{
text-align:center;
margin:60px 0;
}
.cta a{
background:var(--blue);
padding:16px 34px;
border-radius:999px;
color:#fff;
text-decoration:none;
font-size:18px;
}
.cta a:hover{
transform: scale(1.05);
box-shadow: 0 8px 20px rgba(0,0,0,.3);
}

/* FORM */
form{
display:flex;
flex-direction:column;
gap:14px;
}
form input, form textarea{
padding:12px 16px;
border-radius:10px;
border:none;
outline:none;
}
form button{
background:var(--blue);
color:#fff;
border:none;
padding:14px 20px;
border-radius:999px;
cursor:pointer;
font-size:16px;
}
form button:hover{
transform:scale(1.05);
box-shadow:0 8px 20px rgba(0,0,0,.3);
}

/* FOOTER */
footer {
  text-align: center;
  padding: 40px 20px;
  color: #cbd5f5;
  font-family: Arial, sans-serif;
  font-size: 14px;
  opacity: 0.9;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 480px) {
  footer {
    font-size: 13px;
  }
}

/* PAGES */
.page{display:none;opacity:0;transition:opacity .3s;}
.page.active{display:block;opacity:1;}

/* Contact Form */
#contact form {
    max-width: 520px;
    margin: 40px auto;
    background: rgba(11,18,32,0.9);
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,.4);
}

#contact input,
#contact textarea {
    width: 100%;
    padding: 14px 16px;
    margin-bottom: 18px;
    border-radius: 12px;
    border: 1px solid #1f2937;
    background: #0b1220;
    color: #e5e7eb;
    font-size: 15px;
    outline: none;
}

#contact textarea {
    min-height: 120px;
    resize: vertical;
}

#contact input::placeholder,
#contact textarea::placeholder {
    color: #9ca3af;
}

#contact button {
    width: 100%;
    padding: 14px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #1f6feb, #2563eb);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s ease;
}

#contact button:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 30px rgba(37,99,235,.4);
}