body {
    margin: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #f8fafb;
    color: #213;
}
header {
    background: #fff;
    box-shadow: 0 2px 12px #192f4d0a;
    padding: 0.8em 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.logo-img {
    height: 140px;
    width: auto;
    display: block;
    margin: 0 auto 1em auto;
}
nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: center;
    margin: 1em 0;
}
nav a {
    text-decoration: none;
    color: #192f4d;
    font-weight: 500;
    padding: 0.4em 1em;
    border-radius: 20px;
    transition: background 0.2s;
}
nav a.active, nav a:hover {
    background: #e9eef6;
}
.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 2vw 4vw;
}
h1 {
    text-align: center;
    margin-top: 1em;
    margin-bottom: 0.7em;
    font-size:2em;
    font-weight:700;
    letter-spacing:0.02em;
}
.section-title {
    text-align: center;
}
ul {
    padding-left: 1.6em;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
.btn {
    background: #AB3241;
    color: #fff;
    padding: 0.9em 2em;
    border-radius: 28px;
    font-weight:700;
    font-size:1.1em;
    text-decoration:none;
    box-shadow: 0 2px 18px #192f4d18;
    transition: background 0.2s;
}
.btn:hover {
    background: #c34357;
}
footer {
    text-align:center;
    font-size:0.95em;
    color:#888;
    background:#fff;
    padding:1em 0;
}
.about-images-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
    justify-content: center;
    margin-bottom: 2em;
}
.about-images-row img {
    flex: 1 1 320px;
    max-width: 100%;
    width: 100%;
    height: 340px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 2px 16px #192f4d18;
}
.official-box {
    background: #e9eef6;
    border-left: 8px solid #AB3241;
    padding: 1.5em 2em;
    border-radius: 10px;
    margin: 2em 0;
    box-shadow: 0 2px 12px #192f4d0a;
}
.plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(270px,1fr));
    gap:2em;
    margin-bottom:2em;
}
.plan-card {
    background:#fff;border-radius:14px;box-shadow:0 2px 12px #192f4d18;padding:1.5em 1.2em;
}
.plan-card .plan-label {font-size:0.98em;font-weight:700;color:#AB3241;}
.plan-card .plan-title {font-size:1.16em;font-weight:700;margin-top:0.1em;}
.plan-card .plan-price {font-size:1.05em;color:#192f4d;margin:0.7em 0;}
.plan-card .plan-desc {margin-bottom:0.6em;}
.plan-detail-list {margin:0 0 0.8em 1.1em;padding:0;}
.full-plan {grid-column:span 2;}
.plan-note {background:#e9eef6;border-radius:9px;padding:1em 1.5em;margin:2em 0;color:#222;}
@media (max-width:900px) {.container{padding:2vw 2vw;}}
@media (max-width:700px) {
    .container {padding: 2vw 2vw;}
    h1 {font-size:1.4em;}
    nav {gap:0.5em;}
    .plans-grid{grid-template-columns:1fr;gap:1.2em;}
    .about-images-row {flex-direction: column; gap: 1.2em;}
    .about-images-row img {height: 220px;}
}