/* TechyWalk v2.0 - style.css (Foundation)
   This is a clean consolidated stylesheet starter. */

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

:root{
 --primary:#2E8DFF;
 --gold:#D7B36A;
 --bg:#050B14;
 --text:#DDE7F5;
 --muted:#AEBFD3;
 --glass:rgba(255,255,255,.05);
 --glassBorder:rgba(255,255,255,.14);
}

html,body{width:100%;min-height:100%;scroll-behavior:smooth}
body{
 font-family:Inter,sans-serif;
 background:#050B14;
 color:#fff;
 overflow:hidden;
 position:relative;
}

.background{
 position:fixed;inset:0;
 background:url("../assets/background.png") center/cover no-repeat;
 z-index:-30;
}

.overlay{
 position:fixed;inset:0;
 background:linear-gradient(rgba(5,11,20,.45),rgba(5,11,20,.72));
 z-index:-20;
}

.ambient-glow{
 position:fixed;
 width:900px;height:900px;
 left:50%;top:50%;
 transform:translate(-50%,-50%);
 background:radial-gradient(circle,rgba(46,141,255,.14),transparent 70%);
 filter:blur(40px);
 z-index:-15;
}

#particles{
 position:fixed;inset:0;
 width:100%;height:100%;
 pointer-events:none;
 z-index:-10;
}

.hero{
 position:relative;
 z-index:10;
 min-height:100vh;
 display:flex;
 justify-content:center;
 align-items:center;
 padding:40px;
 text-align:center;
}

.hero-content{
 width:min(900px,92vw);
 display:flex;
 flex-direction:column;
 align-items:center;
}

.logo{
 width:clamp(220px,30vw,500px);
 filter:drop-shadow(0 0 30px rgba(46,141,255,.2));
}

.tagline{
 margin-top:24px;
 color:var(--gold);
 letter-spacing:.45rem;
 font-size:clamp(.8rem,1vw,1rem);
}

.hero h1{
    margin-top:22px;
    font-family:"Cormorant Garamond", serif;
    font-size:clamp(2.5rem,4vw,4rem);
    font-weight:600;
    letter-spacing:3px;
    color:#ffffff;
}

.description{
 margin-top:24px;
 max-width:760px;
 color:var(--text);
 line-height:1.8;
 font-size:clamp(1rem,1.3vw,1.25rem);
}

.description span{
 color:var(--primary);
 font-weight:600;
}

.contact-card{
 margin-top:42px;
 display:inline-flex;
 gap:10px;
 align-items:center;
 padding:18px 34px;
 border:1px solid var(--glassBorder);
 background:var(--glass);
 backdrop-filter:blur(12px);
 border-radius:14px;
 color:#fff;
 text-decoration:none;
 transition:.35s;
}

.contact-card:hover{
 transform:translateY(-4px);
 border-color:var(--primary);
 box-shadow:0 0 30px rgba(46,141,255,.25);
}

footer{
 position:fixed;
 left:0;
 right:0;
 bottom:24px;
 width:100%;
 text-align:center;
 color:var(--muted);
 font-size:.85rem;
 letter-spacing:2px;
 z-index:20;
}

@media(max-width:768px){
 body{overflow:auto}
 .hero{padding:24px}
 .tagline{letter-spacing:.2rem}
 footer{
   position:relative;
   bottom:auto;
   margin:40px 0 20px;
 }
}