/*@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');*/

body { font-family:'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background:#f2f5f9; color:#333; line-height:1.6; }

header { text-align:center; padding:50px 20px; }
header h1 { font-family:'Montserrat', sans-serif; font-weight:700; font-size:40px; color:#007bff; margin-bottom:15px; letter-spacing:-0.5px; }
header p { font-family:'Montserrat', sans-serif; font-weight:400; font-size:18px; color:#555; max-width:850px; margin:0 auto; line-height:1.8; }

.container { width:90%; max-width:900px; margin:0 auto; }

.app-container { background:#fff; padding:35px 45px; border-radius:14px; box-shadow:0 6px 25px rgba(0,0,0,0.1); margin-top:40px; text-align:center; transition: all 0.3s ease-in-out; }
.app-container:hover { transform:scale(1.01); }
.app-container h2 { font-family:'Montserrat', sans-serif; font-weight:600; margin-bottom:20px; font-size:28px; color:#333; }
.ip-display { font-family:'Montserrat', sans-serif; font-weight:500; font-size:24px; margin-bottom:20px; }

select, input { font-family:'Montserrat', sans-serif; font-weight:400; width:90%; padding:14px; margin:12px 0; border:1px solid #ccc; border-radius:8px; font-size:16px; }
button { font-family:'Montserrat', sans-serif; font-weight:600; padding:14px 35px; background:#007bff; color:#fff; border:none; border-radius:8px; cursor:pointer; font-size:18px; margin-top:12px; transition:0.3s; text-transform:uppercase; letter-spacing:0.5px; }
button:hover { background:#0056b3; transform:translateY(-2px); }

.result { font-family:'Montserrat', sans-serif; font-weight:500; margin-top:25px; font-size:18px; opacity:0; transform:translateY(10px); transition: all 0.4s ease; }
.result.show { opacity:1; transform:translateY(0); }
.result.open { color: #28a745; }
.result.closed { color: #dc3545; }
.result.error { color: #ff8800; }
.custom-port { display:none; }

.info-section { margin-top:60px; background:#fff; padding:50px; border-radius:14px; box-shadow:0 6px 25px rgba(0,0,0,0.05); width:100%; }
.info-section h3 { font-family:'Montserrat', sans-serif; font-weight:600; margin-bottom:20px; color:#007bff; font-size:24px; text-align:center; }
.info-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:20px; margin-top:25px; }
.info-card { font-family:'Montserrat', sans-serif; background:#f8f9fb; padding:20px; border-radius:10px; text-align:center; transition:0.3s; }
.info-card:hover { background:#eef3f8; transform:translateY(-4px); }
.info-card strong { font-family:'Montserrat', sans-serif; font-weight:600; display:block; font-size:18px; margin-bottom:8px; color:#333; }
.info-section p { font-family:'Montserrat', sans-serif; font-weight:400; margin-bottom:15px; text-align:center; font-size:16px; color:#555; }

.privacy-container { width:90%; max-width:900px; margin:0 auto; background:#fff; padding:35px 45px; border-radius:14px; box-shadow:0 6px 25px rgba(0,0,0,0.1); margin-top:40px; }
.privacy-container h2 { font-family:'Montserrat', sans-serif; font-weight:600; font-size:26px; color:#333; margin-bottom:15px; }
.privacy-container p, .privacy-container ul { font-family:'Montserrat', sans-serif; font-weight:400; font-size:16px; color:#555; margin-bottom:15px; }
.back-btn { font-family:'Montserrat', sans-serif; font-weight:500; display:inline-block; margin-top:25px; padding:14px 30px; background:#007bff; color:#fff; text-decoration:none; border-radius:8px; font-size:18px; transition:0.3s; }
.back-btn:hover { background:#0056b3; }

footer { font-family:'Montserrat', sans-serif; font-weight:400; text-align:center; margin-top:60px; padding:20px 0; color:#555; font-size:15px; }
footer a { font-family:'Montserrat', sans-serif; color:#007bff; text-decoration:none; margin-left:10px; }
footer a:hover { text-decoration:underline; }