* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Roboto, Arial, sans-serif; }
        :root { --primary: #00338D; --secondary: #D60A0A; --dark: #1a1a2e; --light: #f5f7fa; --accent: #ffb81c; }
        body { background: var(--light); color: #222; line-height: 1.7; }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
        header { background: linear-gradient(135deg, var(--dark), var(--primary)); color: #fff; padding: 1rem 0; box-shadow: 0 4px 20px rgba(0,0,0,.3); }
        .header-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
        .my-logo { font-size: 1.9rem; font-weight: 800; text-decoration: none; color: #fff; letter-spacing: -1px; }
        .my-logo span { color: var(--accent); }
        .my-logo small { display: block; font-size: .75rem; font-weight: 300; opacity: .8; letter-spacing: 2px; }
        nav { display: flex; align-items: center; gap: 1.2rem; }
        nav a { color: #eee; text-decoration: none; font-size: .95rem; padding: 8px 14px; border-radius: 30px; transition: all .3s; }
        nav a:hover { background: rgba(255,255,255,.15); color: var(--accent); }
        .hamburger { display: none; background: none; border: none; color: #fff; font-size: 1.8rem; cursor: pointer; }
        @media(max-width:768px) {
            .hamburger { display: block; }
            nav { display: none; flex-direction: column; position: absolute; top: 70px; left: 0; right: 0; background: var(--dark); padding: 1rem; z-index: 999; border-bottom: 4px solid var(--accent); }
            nav.open { display: flex; }
        }
        .breadcrumb { background: rgba(255,255,255,.08); padding: 8px 20px; font-size: .85rem; }
        .breadcrumb a { color: var(--accent); text-decoration: none; }
        .breadcrumb span { color: #ccc; margin: 0 6px; }
        .hero { background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.7)), url('https://placehold.co/1600x600/0a1f3d/white?text=MetLife+Stadium+Shuttle') center/cover; color: #fff; text-align: center; padding: 5rem 20px; }
        .hero h1 { font-size: 3rem; margin-bottom: 1rem; text-shadow: 0 4px 15px rgba(0,0,0,.5); }
        .hero p { font-size: 1.3rem; max-width: 800px; margin: 0 auto; }
        main { padding: 2rem 0; }
        article { background: #fff; border-radius: 16px; padding: 2rem; box-shadow: 0 2px 20px rgba(0,0,0,.06); margin-bottom: 2rem; }
        article img { max-width: 100%; border-radius: 12px; margin: 1.5rem 0; }
        h2 { color: var(--primary); font-size: 1.8rem; margin: 2.2rem 0 1rem; padding-bottom: 8px; border-bottom: 3px solid var(--accent); display: inline-block; }
        h3 { color: #1a3a6a; font-size: 1.35rem; margin: 1.8rem 0 .8rem; }
        h4 { font-size: 1.1rem; color: #555; margin: 1.2rem 0 .5rem; }
        p { margin-bottom: 1rem; text-align: justify; }
        ul, ol { margin: 0 0 1.2rem 1.5rem; }
        li { margin-bottom: .5rem; }
        a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
        a:hover { color: var(--secondary); }
        .info-box { background: #f0f4ff; border-left: 5px solid var(--primary); padding: 1rem 1.5rem; border-radius: 8px; margin: 1.5rem 0; }
        .warning-box { background: #fff8f0; border-left: 5px solid var(--accent); padding: 1rem 1.5rem; border-radius: 8px; margin: 1.5rem 0; }
        table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem; }
        th { background: var(--primary); color: #fff; padding: 10px; text-align: left; }
        td { border: 1px solid #ddd; padding: 10px; }
        tr:nth-child(even) { background: #f8f9fc; }
        .search-section { background: var(--primary); color: #fff; padding: 2rem; border-radius: 16px; margin: 2rem 0; text-align: center; }
        .search-section input { width: 70%; padding: 12px 20px; border: none; border-radius: 30px; font-size: 1rem; }
        .search-section button { padding: 12px 28px; border: none; border-radius: 30px; background: var(--accent); color: var(--dark); font-weight: 700; cursor: pointer; margin-left: 10px; transition: transform .2s; }
        .search-section button:hover { transform: scale(1.05); }
        .comment-form, .score-form { background: #f8f9fc; padding: 1.5rem; border-radius: 12px; margin: 1.5rem 0; }
        .comment-form textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 8px; min-height: 100px; font-size: 1rem; }
        .comment-form input, .score-form input { padding: 10px 16px; border: 1px solid #ccc; border-radius: 8px; font-size: 1rem; margin-right: 8px; }
        .btn-submit { background: var(--primary); color: #fff; border: none; padding: 12px 28px; border-radius: 30px; font-weight: 700; cursor: pointer; transition: all .3s; }
        .btn-submit:hover { background: var(--secondary); }
        .friend-link { display: flex; flex-wrap: wrap; gap: 12px; background: var(--dark); color: #fff; padding: 1.5rem; border-radius: 12px; margin: 2rem 0; }
        .friend-link a { color: var(--accent); text-decoration: none; padding: 6px 14px; background: rgba(255,255,255,.08); border-radius: 20px; font-size: .9rem; transition: all .3s; }
        .friend-link a:hover { background: rgba(255,255,255,.2); }
        footer { background: var(--dark); color: #aaa; text-align: center; padding: 2rem 20px; font-size: .85rem; }
        footer a { color: var(--accent); }
        .star-rating { display: flex; gap: 5px; font-size: 1.6rem; color: #ddd; margin: 10px 0; }
        .star-rating i.active { color: var(--accent); }
        @media(max-width:768px) {
            .hero h1 { font-size: 2rem; }
            .search-section input { width: 90%; margin-bottom: 10px; }
            article { padding: 1rem; }
            table { font-size: .8rem; }
            .my-logo { font-size: 1.5rem; }
        }
        @media(max-width:480px) {
            .hero h1 { font-size: 1.6rem; }
            .hero p { font-size: 1rem; }
        }