/* Phantomhive Consulting - style.css */
:root{
    --accent: #2ab7ca;
    --bg-dark: #0a0a0a;
    --muted: #f4f4f4;
    --card: #f9f9f9;
    --max-width: 1100px;
}

*{box-sizing:border-box}
body{
    font-family: Inter, "Helvetica Neue", Arial, sans-serif;
    margin:0;
    color:#222;
    line-height:1.6;
    background: linear-gradient(180deg, #f6f7f8 0%, #ffffff 100%);
}

.container{
    width:90%;
    max-width:var(--max-width);
    margin:0 auto;
}

header{
    background: var(--bg-dark);
    color:#fff;
    padding:1rem 0;
    position:sticky;
    top:0;
    z-index:50;
}

header .container{display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:700;font-size:1.35rem;letter-spacing:0.5px}
.logo span{color:var(--accent)}

nav a{color:#fff;margin-left:1rem;text-decoration:none;font-weight:600;opacity:0.95}
nav a:hover{opacity:1; text-decoration:underline}

.hero{
    background: linear-gradient(135deg, rgba(42,183,202,0.95), rgba(10,10,10,0.95));
    color:white;
    text-align:center;
    padding:5rem 0;
    margin-bottom:1.5rem;
}

.hero h2{font-size:2rem;margin:0 0 0.5rem}
.hero p{max-width:700px;margin:0 auto 1rem}

.btn{
    display:inline-block;
    background: #fff;
    color: var(--bg-dark);
    padding:0.75rem 1.25rem;
    text-decoration:none;
    margin-top:1rem;
    border-radius:6px;
    font-weight:700;
}

.services,.about,.contact{padding:3rem 0;background:transparent}
.services h2,.about h2,.contact h2{text-align:center;margin-bottom:1rem}

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:1rem;
    margin-top:1rem;
}

.card{
    background:var(--card);
    padding:1.5rem;
    border-radius:8px;
    box-shadow: 0 6px 18px rgba(20,20,20,0.05);
}

form input, form textarea, form button{
    display:block;
    width:100%;
    margin-bottom:1rem;
    padding:0.85rem;
    border-radius:6px;
    border:1px solid #e6e6e6;
    font-size:0.98rem;
}

form textarea{min-height:140px;resize:vertical}

form button{
    background:var(--accent);
    border:none;
    color:#fff;
    cursor:pointer;
    font-weight:700;
    font-size:1rem;
    padding:0.9rem;
}

footer{background:var(--bg-dark);color:#fff;text-align:center;padding:1rem 0;margin-top:2rem;border-top:4px solid rgba(255,255,255,0.03)}

@media(max-width:700px){
    .hero{padding:3rem 0}
    header .container{flex-direction:column;gap:0.5rem}
    nav a{margin-left:0.6rem}
}