*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Inter,sans-serif;background:#0b0f14;color:#eaf0f6}
.container{max-width:1100px;margin:auto;padding:0 20px}

/* NAV */
.menu-toggle{display:none}
.nav{position:sticky;top:0;z-index:10;background:rgba(11,15,20,.7);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav-inner{display:flex;justify-content:space-between;align-items:center;height:60px}
.logo{font-weight:700;background:linear-gradient(90deg,#0a84ff,#6dd5fa);-webkit-background-clip:text;color:transparent}

/* HAMBURGER */
.hamburger{width:26px;height:18px;position:relative;cursor:pointer}
.hamburger span{position:absolute;height:2px;width:100%;background:#fff;left:0;transition:.3s}
.hamburger span:nth-child(1){top:0}
.hamburger span:nth-child(2){top:8px}
.hamburger span:nth-child(3){bottom:0}

/* MENU */
.menu{
position:fixed;inset:0;
background:radial-gradient(circle at 20% 20%,#0a84ff55,transparent 40%),linear-gradient(135deg,#05070d,#0a0f1f);
display:flex;align-items:center;justify-content:center;
flex-direction:column;gap:26px;
opacity:0;pointer-events:none;transition:.4s;z-index:20;
}
.menu a{font-size:26px;font-weight:600;color:#fff;text-decoration:none}

/* CLOSE */
.close{position:absolute;top:20px;right:20px;width:28px;height:28px;cursor:pointer}
.close:before,.close:after{content:"";position:absolute;width:100%;height:2px;background:#fff;top:50%}
.close:before{transform:rotate(45deg)}
.close:after{transform:rotate(-45deg)}

/* OPEN */
.menu-toggle:checked ~ .menu{opacity:1;pointer-events:auto}
.menu-toggle:checked + nav label span:nth-child(1){transform:rotate(45deg);top:8px}
.menu-toggle:checked + nav label span:nth-child(2){opacity:0}
.menu-toggle:checked + nav label span:nth-child(3){transform:rotate(-45deg);bottom:8px}

/* HERO */
.hero{padding:100px 0}
.hero h1{font-size:32px;margin-bottom:10px}
.hero p{color:#9fb0c3;margin-bottom:20px}

/* BUTTON */
.cta{display:inline-block;background:#0a84ff;color:#fff;padding:12px 16px;border-radius:6px;font-weight:600}

/* SECTION */
section{padding:60px 0}
h2{font-size:24px;margin-bottom:16px}

/* GRID */
.grid{display:grid;gap:16px}

/* CARD */
.card{padding:20px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);transition:.3s}
.card:hover{transform:translateY(-4px);border-color:#0a84ff}

/* ICON */
.icon{
width:26px;
height:26px;
margin-bottom:12px;
color:#0a84ff;
}

.icon svg{
width:100%;
height:100%;
stroke:currentColor;
}

/* ABOUT */
.about{display:grid;gap:20px}
.highlight{padding:20px;border-radius:12px;background:linear-gradient(135deg,#0a84ff22,#6dd5fa11)}

/* CONTACT */
.contact{text-align:center;background:#0f141b}
.phone{font-size:24px;font-weight:700;margin:10px 0}

/* FOOTER */
footer{text-align:center;padding:30px 0;color:#6b7c8f;font-size:14px}

/* DESKTOP */
@media(min-width:768px){
.hero h1{font-size:52px}
.grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.about{grid-template-columns:1fr 1fr}
section{padding:90px 0}
h2{font-size:30px}
.menu a{font-size:34px}
}