/* EnHost public site (plans). */
:root { --ink: #10202b; --muted: #5b6b78; --acc: #0e7490; --acc2: #0891b2; --soft: #e6f6f9; --line: #e3e9ee; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #f6f9fb; font-size: 16px; line-height: 1.5; }
a { color: var(--acc); text-decoration: none; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
header { background: linear-gradient(135deg, #0b4f63 0%, #0e7490 55%, #0891b2 100%); color: #fff; padding-bottom: 64px; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; padding-bottom: 16px; }
.logo { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; font-size: 20px; }
.logo img { width: 34px; height: 34px; border-radius: 9px; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: flex-end; }
nav a { color: #e0f7fb; font-weight: 600; font-size: 15px; }
.btn-s { background: #fff; color: var(--acc) !important; padding: 7px 14px; border-radius: 10px; }
.hero { padding-top: 40px; max-width: 760px; }
.hero h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.12; margin: 0 0 14px; letter-spacing: -.01em; }
.hero p { font-size: 18px; color: #d4f1f7; margin: 0 0 26px; }
.cta { display: inline-block; background: var(--acc); color: #fff; font-weight: 700; padding: 11px 18px; border-radius: 11px; text-align: center; }
.cta.off { background: #e3e9ee; color: var(--muted); }
.cta.big { background: #fff; color: var(--acc); padding: 13px 24px; font-size: 17px; }
main { padding-top: 36px; }
section { margin-bottom: 44px; }
section h2 { font-size: 26px; margin: 0 0 4px; }
section .sub { color: var(--muted); margin: 0 0 18px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.pc { background: #fff; border-radius: 18px; padding: 22px; box-shadow: 0 6px 24px rgba(16,32,43,.08); display: flex; flex-direction: column; position: relative; border: 2px solid transparent; }
.pc.pop { border-color: var(--acc2); }
.ribbon { position: absolute; top: -12px; left: 22px; background: var(--acc2); color: #fff; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.pc h3 { margin: 0; font-size: 20px; }
.pc .tg { color: var(--muted); margin: 2px 0 14px; font-size: 14px; min-height: 21px; }
.price { font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.price small { font-size: 15px; font-weight: 600; color: var(--muted); }
.per { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.pc ul { list-style: none; padding: 0; margin: 0 0 20px; flex: 1; }
.pc li { padding: 6px 0 6px 26px; position: relative; font-size: 15px; border-bottom: 1px solid #f0f3f5; }
.pc li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 12px; height: 7px; border-left: 2.5px solid var(--acc2); border-bottom: 2.5px solid var(--acc2); transform: rotate(-45deg); }
.why { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.why div { background: #fff; border-radius: 14px; padding: 16px 18px; }
.why b { display: block; font-size: 16px; margin-bottom: 4px; color: var(--acc); }
.why span { color: var(--muted); font-size: 14px; }
footer { border-top: 1px solid var(--line); padding: 22px 0 40px; color: var(--muted); font-size: 14px; background: #fff; }
@media (max-width: 600px) { nav a:not(.btn-s) { display: none; } .hero { padding-top: 18px; } }