@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Grotesk:wght@400;600;700&display=swap');

:root {
    --ms-bg: #f4f6f8;
    --ms-surface: #ffffff;
    --ms-primary: #0270D7;
    --ms-primary-dark: #014d94;
    --ms-text: #1a1c1e;
    --ms-text-light: #6c757d;
    --ms-font-head: 'Press Start 2P', cursive;
    --ms-font-body: 'Space Grotesk', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--ms-bg); color: var(--ms-text); font-family: var(--ms-font-body); }
a { text-decoration: none; color: var(--ms-primary); transition: 0.3s; }
a:hover { color: var(--ms-primary-dark); }


.ms-header { background: var(--ms-surface); padding: 20px 50px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 20px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 1000; }
.ms-logo { font-family: var(--ms-font-head); font-size: 14px; color: var(--ms-primary); letter-spacing: -1px; }
.ms-nav { display: flex; gap: 30px; }
.ms-nav a { font-weight: 700; color: var(--ms-text); font-size: 16px; text-transform: uppercase; }
.ms-nav a:hover { color: var(--ms-primary); }
.ms-menu-btn { display: none; background:none; border:none; font-size: 24px; cursor:pointer; }


.ms-hero { position: relative; height: 80vh; display: flex; align-items: center; overflow: hidden; background: linear-gradient(135deg, #0270D7 0%, #00122e 100%); color: #fff; }
.ms-hero-waves { position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg"><path fill="%23f4f6f8" fill-opacity="1" d="M0,288L48,272C96,256,192,224,288,197.3C384,171,480,149,576,165.3C672,181,768,235,864,250.7C960,267,1056,245,1152,224C1248,203,1344,181,1392,170.7L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat; background-size: cover; }
.ms-hero-content { padding: 50px; z-index: 1; max-width: 800px; }
.ms-hero-title { font-family: var(--ms-font-head); font-size: 2.5rem; line-height: 1.4; margin-bottom: 20px; }
.ms-hero-desc { font-size: 1.2rem; margin-bottom: 40px; opacity: 0.9; }


.ms-cta { display: inline-block; background: linear-gradient(180deg, #e0e0e0 0%, #b0b0b0 100%); color: #111; padding: 15px 30px; font-weight: 700; text-transform: uppercase; border-radius: 4px; box-shadow: 0 5px 15px rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255,0.8); transition: transform 0.2s, box-shadow 0.2s; border: 1px solid #999; }
.ms-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.4), inset 0 2px 0 rgba(255,255,255,0.8); color: #000; }
.ms-cta.primary { background: linear-gradient(180deg, #248bf0 0%, #0270D7 100%); color: #fff; border-color: #014d94; }


.ms-section { padding: 80px 50px; max-width: 1400px; margin: 0 auto; }
.ms-section-title { font-size: 2.5rem; font-weight: 700; margin-bottom: 50px; color: var(--ms-primary); display: flex; align-items: center; gap: 15px; }
.ms-section-title::after { content: ''; flex-grow: 1; height: 2px; background: #e0e0e0; }


.ms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px; }
.ms-card { background: var(--ms-surface); border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid #e0e0e0; display: flex; flex-direction: column; transition: transform 0.3s, box-shadow 0.3s; }
.ms-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(2,112,215,0.15); border-color: var(--ms-primary); }
.ms-card-img { width: 100%; height: 220px; object-fit: cover; border-bottom: 4px solid var(--ms-primary); }
.ms-card-body { padding: 30px; display: flex; flex-direction: column; flex-grow: 1; }
.ms-card-tags { margin-bottom: 15px; }
.ms-tag { display: inline-block; background: rgba(2,112,215,0.1); color: var(--ms-primary); padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; margin-right: 8px; text-transform: uppercase; }
.ms-card-title { font-size: 1.4rem; margin-bottom: 10px; }
.ms-card-rating { font-family: var(--ms-font-head); font-size: 0.8rem; color: #f39c12; margin-bottom: 20px; }
.ms-card-desc { color: var(--ms-text-light); font-size: 1rem; flex-grow: 1; margin-bottom: 25px; }


.ms-filters { display: flex; justify-content: center; gap: 15px; margin-bottom: 50px; flex-wrap: wrap; }
.ms-filter-btn { background: var(--ms-surface); border: 2px solid #e0e0e0; padding: 10px 25px; border-radius: 30px; font-weight: 700; color: var(--ms-text); cursor: pointer; transition: 0.3s; }
.ms-filter-btn:hover, .ms-filter-btn.active { background: var(--ms-primary); border-color: var(--ms-primary); color: #fff; }


.ms-detail-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 50px; }
.ms-detail-hero { width: 100%; height: 400px; object-fit: cover; border-radius: 12px; margin-bottom: 40px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.ms-panel { background: var(--ms-surface); padding: 40px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid #e0e0e0; margin-bottom: 40px; }
.ms-panel-title { font-family: var(--ms-font-head); font-size: 1.2rem; color: var(--ms-primary); margin-bottom: 25px; }
.ms-chart-bar { background: #f0f0f0; height: 10px; border-radius: 5px; margin-bottom: 20px; overflow: hidden; }
.ms-chart-fill { background: var(--ms-primary); height: 100%; }


.ms-media-widget { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 20px; }
.ms-media-card { min-width: 300px; background: var(--ms-surface); padding: 30px; border-radius: 8px; border-left: 5px solid #f39c12; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.ms-media-logo { font-weight: 900; font-size: 1.5rem; color: #111; margin-bottom: 15px; }


.ms-comment { display: flex; gap: 20px; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #e0e0e0; }
.ms-avatar { width: 50px; height: 50px; background: var(--ms-primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; }
.ms-comment-body h4 { margin-bottom: 5px; }


.ms-legal-content { max-width: 800px; margin: 0 auto; background: var(--ms-surface); padding: 50px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.ms-faq-item { border: 1px solid #e0e0e0; border-radius: 8px; margin-bottom: 15px; overflow: hidden; }
.ms-faq-q { padding: 20px; background: #fafafa; font-weight: 700; cursor: pointer; display: flex; justify-content: space-between; }
.ms-faq-q:hover { background: #f0f0f0; }
.ms-faq-a { padding: 0 20px; max-height: 0; overflow: hidden; transition: 0.3s; }
.ms-faq-item.active .ms-faq-a { padding: 20px; max-height: 500px; border-top: 1px solid #e0e0e0; }


.ms-input { width: 100%; padding: 15px; border: 2px solid #e0e0e0; border-radius: 8px; margin-bottom: 20px; font-family: var(--ms-font-body); transition: border 0.3s; }
.ms-input:focus { border-color: var(--ms-primary); outline: none; }
.ms-popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 2000; opacity: 0; visibility: hidden; transition: 0.3s; }
.ms-popup-overlay.show { opacity: 1; visibility: visible; }
.ms-popup { background: var(--ms-surface); padding: 50px; border-radius: 12px; text-align: center; max-width: 400px; transform: translateY(20px); transition: 0.3s; }
.ms-popup-overlay.show .ms-popup { transform: translateY(0); }


.ms-footer { background: #111; color: #fff; padding: 60px 50px; text-align: center; }
.ms-footer-links { display: flex; justify-content: center; gap: 30px; margin-bottom: 30px; flex-wrap: wrap; }
.ms-footer-links a { color: #888; }
.ms-footer-links a:hover { color: #fff; }

@media (max-width: 768px) {
    .ms-nav { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; width: 100%; background: var(--ms-surface); padding: 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
    .ms-nav.active { display: flex; }
    .ms-menu-btn { display: block; }
    .ms-detail-layout { grid-template-columns: 1fr; }
    .ms-hero-title { font-size: 1.5rem; }
}