:root { --blue: #1977ef; --blue-deep: #1264d5; --cyan: #16c7d8; --ice: #eef8ff; --line: #8abaff; --ink: #293850; --muted: #5f6d81; --red: #f22828; --white: #fff; }
* { box-sizing: border-box; }
.mobile-table-title { display: none; }
html { scroll-behavior: smooth; }
body { margin: 0px; color: var(--ink); font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; background: radial-gradient(circle at 50% 0px, rgb(255, 255, 255) 0px, rgb(233, 246, 255) 48%, rgb(245, 250, 255) 100%); font-size: 18px; font-weight: 650; line-height: 1.72; }
.hero { position: relative; isolation: isolate; min-height: 480px; overflow: hidden; padding: 70px 24px 55px; background: linear-gradient(rgba(13, 86, 154, 0.72), rgba(217, 240, 255, 0.68) 52%, rgb(234, 247, 255) 100%); }
.hero::before { content: ""; position: absolute; z-index: -2; inset: 0px; background: linear-gradient(118deg, rgb(8, 47, 92) 0px, rgb(8, 47, 92) 19%, transparent 36%), linear-gradient(242deg, rgb(13, 68, 122) 0px, rgb(13, 68, 122) 18%, transparent 35%), radial-gradient(circle at 50% 22%, rgb(255, 255, 255) 0px, rgb(255, 255, 255) 3%, rgba(255, 255, 255, 0.42) 4%, rgba(255, 255, 255, 0.42) 12%, transparent 25%), linear-gradient(135deg, rgb(94, 173, 217), rgb(237, 248, 255) 50%, rgb(90, 155, 198)); }
.hero::after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -120px; width: 850px; height: 360px; border-radius: 50%; background: rgba(239, 249, 255, 0.88); filter: blur(16px); transform: translateX(-50%); }
.hero-art { position: absolute; z-index: -1; inset: 0px; opacity: 0.74; }
.globe { position: absolute; border: 1px solid rgba(255, 255, 255, 0.42); border-radius: 50%; }
.globe-one { width: 430px; height: 430px; left: calc(50% - 215px); top: -145px; }
.globe-two { width: 300px; height: 300px; left: calc(50% - 150px); top: -80px; }
.hand { position: absolute; top: 105px; width: 42%; height: 105px; background: linear-gradient(rgb(18, 63, 112), rgb(6, 44, 87)); box-shadow: rgba(9, 57, 99, 0.25) 0px 20px 35px; }
.hand-left { left: -3%; transform: rotate(13deg); border-radius: 0px 65px 35px 0px; }
.hand-right { right: -3%; transform: rotate(-13deg); border-radius: 65px 0px 0px 35px; }
.hero-content { position: relative; z-index: 2; max-width: 1060px; margin: auto; text-align: center; }
.eyebrow { margin: 0px 0px 8px; color: rgb(223, 248, 255); font-size: 14px; font-weight: 800; letter-spacing: 0.28em; }
.hero h1 { margin: 0px; font-size: clamp(76px, 11vw, 138px); line-height: 1.05; font-weight: 950; letter-spacing: 0.08em; background: linear-gradient(100deg, rgb(15, 209, 222), rgb(33, 137, 255) 65%, rgb(23, 105, 227)) text; color: transparent; -webkit-text-stroke: 3px rgb(255, 255, 255); filter: drop-shadow(rgba(35, 82, 132, 0.28) 0px 5px 4px); }
.date { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 16px auto 10px; font-size: 28px; }
.date span { color: var(--blue); font-size: 16px; font-weight: 800; }
.date strong { font-weight: 800; }
.intro { max-width: 980px; margin: 18px auto 0px; padding-top: 16px; border-top: 1px solid rgba(69, 133, 187, 0.24); text-align: left; font-size: 19px; line-height: 1.7; }
.page { width: min(1120px, 100% - 32px); margin: -22px auto 0px; padding-bottom: 48px; }
.data-card, .info-card { position: relative; margin: 0px 0px 26px; padding: 30px 26px 24px; border: 1px solid rgba(63, 148, 246, 0.18); border-radius: 24px; background: rgba(255, 255, 255, 0.94); box-shadow: rgba(42, 116, 181, 0.13) 0px 12px 36px; backdrop-filter: blur(12px); }
.data-card > h2 { position: absolute; top: -23px; left: 50%; margin: 0px; transform: translateX(-50%); }
.data-card > h2 span { display: block; min-width: 250px; padding: 5px 38px 7px; border-radius: 10px 10px 18px 18px; background: linear-gradient(110deg, rgb(40, 124, 245), rgb(26, 103, 231), rgb(41, 140, 247)); box-shadow: rgba(23, 100, 224, 0.24) 0px 5px 13px; color: rgb(255, 255, 255); font-size: 24px; line-height: 1.25; text-align: center; letter-spacing: 0.35em; text-indent: 0.35em; }
.table-wrap { overflow: hidden; border: 1px solid rgb(103, 165, 255); border-radius: 10px; background: rgb(255, 255, 255); }
table { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: center; }
th, td { height: 48px; padding: 8px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 18px; line-height: 1.35; }
tr:last-child > * { border-bottom: 0px; }
tr > :last-child { border-right: 0px; }
thead th { height: 52px; background: linear-gradient(rgb(33, 138, 245), rgb(23, 111, 222)); color: rgb(255, 255, 255); font-size: 19px; font-weight: 800; }
thead th:nth-child(1) { width: 27%; }
thead th:nth-child(2) { width: 48%; }
tbody th { background: rgb(248, 252, 255); font-weight: 600; }
tbody tr:nth-child(2n) td { background: rgb(245, 250, 255); }
.money { color: var(--red); font-weight: 800; letter-spacing: 0.02em; }
.salary-note { margin: 16px 4px 0px; font-size: 17px; line-height: 1.65; }
.salary-note span, .highlight { color: var(--red); font-weight: 700; }
.info-card { padding: 24px 28px; }
.info-card h2 { margin: 0px 0px 8px; color: rgb(38, 54, 76); font-size: 24px; }
.info-card h2::after { content: ""; display: block; width: 42px; height: 4px; margin-top: 8px; border-radius: 4px; background: linear-gradient(90deg,var(--cyan),var(--blue)); }
.info-card ul { margin: 0px; padding-left: 1.25em; }
.info-card li { padding-left: 0.2em; }
.info-card li + li { margin-top: 7px; }
.info-card li::marker { color: rgb(52, 74, 101); }
.info-card li.highlight::marker { color: var(--red); }
footer { padding: 16px 20px 30px; color: rgb(123, 145, 168); font-size: 14px; text-align: center; }
@media (max-width: 700px) {
  body { font-size: 18px; line-height: 1.75; }
  .hero { min-height: 0px; padding: 42px 18px 48px; }
  .hero-art { opacity: 0.38; }
  .hand { top: 82px; height: 72px; }
  .eyebrow { font-size: 11px; }
  .hero h1 { font-size: clamp(58px, 20vw, 86px); letter-spacing: 0.03em; -webkit-text-stroke: 2px rgb(255, 255, 255); }
  .date { display: grid; gap: 2px; margin-top: 20px; font-size: 22px; line-height: 1.4; }
  .date span { font-size: 14px; }
  .intro { margin-top: 16px; font-size: 18px; line-height: 1.75; }
  .page { width: calc(100% - 20px); margin: -14px auto 0px; padding-bottom: 25px; }
  .data-card, .info-card { margin-bottom: 22px; border-radius: 18px; }
  .data-card { padding: 27px 12px 14px; }
  .data-card > h2 { top: -20px; }
  .data-card > h2 span { min-width: 178px; font-size: 20px; }
  .table-wrap { overflow: visible; border: 0px; background: transparent; }
  table, tbody { display: block; }
  thead { display: none; }
  tbody { display: grid; gap: 12px; }
  tbody tr { display: grid; grid-template-columns: minmax(104px, 0.8fr) minmax(0px, 1.25fr); overflow: hidden; border: 1px solid rgb(154, 195, 250); border-radius: 11px; background: rgb(255, 255, 255); box-shadow: rgba(36, 111, 192, 0.07) 0px 4px 11px; }
  tbody tr::before { content: attr(data-tenure); display: flex; grid-row: 1 / span 2; align-items: center; justify-content: center; padding: 12px 8px; background: linear-gradient(rgb(236, 247, 255), rgb(248, 252, 255)); color: var(--blue-deep); font-size: 18px; font-weight: 700; text-align: center; }
  tbody tr > * { border: 0px !important; }
  tbody th { display: none !important; }
  tbody td { position: relative; height: auto; min-height: 48px; padding: 12px 10px 12px 48%; font-size: 18px; text-align: left; background: rgb(255, 255, 255) !important; }
  tbody td::before { content: attr(data-label); position: absolute; left: 10px; top: 50%; width: 43%; color: rgb(104, 120, 141); font-size: 14px; font-weight: 600; transform: translateY(-50%); }
  tbody td:last-child { color: var(--red); font-weight: 800; border-top: 1px solid rgb(226, 239, 255) !important; }
  .salary-table tbody { gap: 10px; }
  .salary-table tbody tr { grid-template-columns: minmax(100px, 0.78fr) minmax(0px, 1.4fr); }
  .salary-note { font-size: 17px; }
  .info-card { padding: 22px 18px; }
  .info-card h2 { font-size: 23px; }
  .info-card ul { padding-left: 1.1em; }
  .info-card li + li { margin-top: 10px; }
}
@media (max-width: 390px) {
  .hero { padding-left: 14px; padding-right: 14px; }
  .hero h1 { font-size: 58px; }
  .page { width: calc(100% - 14px); }
  .data-card { padding-left: 8px; padding-right: 8px; }
  tbody tr { grid-template-columns: 92px minmax(0px, 1fr); }
  tbody th, tbody td { font-size: 17px; }
  tbody td { padding-left: 47%; }
  .info-card { padding-left: 15px; padding-right: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
@media (max-width: 700px) {
  .site-nav { display: block !important; }
}
@media (max-width: 700px) {
  .data-card > h2 { position: sticky; z-index: 70; top: 4px; left: auto; width: max-content; margin: -48px auto 12px; transform: none; }
  .calculator-heading h2, .faq-heading h2, .info-card h2 { position: sticky; z-index: 70; top: 4px; margin-right: -6px; margin-left: -6px; padding: 7px 10px; border: 1px solid rgba(111, 169, 230, 0.28); border-radius: 11px; background: rgba(245, 251, 255, 0.96); box-shadow: rgba(27, 90, 151, 0.12) 0px 5px 15px; backdrop-filter: blur(12px); }
  .calculator-heading h2 { color: var(--blue-deep); }
  .faq-heading h2 { color: var(--blue-deep); }
  .info-card h2::after { margin-top: 5px; }
}
.intro, .date, .salary-note, .info-card, th, td { font-weight: 700; }
.info-card h2, .data-card h2, .money, .highlight { font-weight: 900; }
@media (max-width: 700px) {
  .table-wrap { overflow: hidden; border: 1px solid rgb(103, 165, 255); background: rgb(255, 255, 255); }
  .table-wrap table { display: table; width: 100%; table-layout: fixed; }
  .table-wrap thead { display: table-header-group; }
  .table-wrap tbody { display: table-row-group; }
  .table-wrap tbody tr { display: table-row; border: 0px; border-radius: 0px; box-shadow: none; }
  .table-wrap tbody tr::before { display: none; }
  .table-wrap tbody th { grid-row: auto; padding: 9px 5px; background: rgb(242, 249, 255); color: var(--blue-deep); font-size: 16px; line-height: 1.35; vertical-align: middle; display: table-cell !important; }
  .table-wrap tbody td { display: table-cell; height: 45px; min-height: 0px; padding: 8px 5px; font-size: 16px; line-height: 1.3; text-align: center; vertical-align: middle; background: rgb(255, 255, 255) !important; }
  .table-wrap tbody td::before { display: none; }
  .table-wrap th, .table-wrap td { border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; }
  .table-wrap tr:last-child > * { border-bottom: 0px !important; }
  .table-wrap tr > :last-child { border-right: 0px !important; }
  .table-wrap thead th { display: table-cell; height: 48px; padding: 7px 4px; font-size: 14px; line-height: 1.3; }
  .table-wrap thead th:nth-child(1) { width: 27%; }
  .table-wrap thead th:nth-child(2) { width: 48%; }
  .table-wrap thead th:nth-child(3) { width: 25%; }
  .salary-table tbody tr { display: table-row; }
}
.faq-section { margin-top: 34px; }
.faq-heading { margin-bottom: 18px; text-align: center; }
.faq-heading p { margin: 0px; color: rgb(94, 145, 200); font-size: 13px; font-weight: 900; letter-spacing: 0.18em; }
.faq-heading h2 { margin: 4px 0px 0px; color: var(--blue-deep); font-size: 34px; line-height: 1.3; }
.faq-heading h2 span { color: var(--cyan); }
.faq-item { margin-bottom: 14px; padding: 20px 24px; border: 1px solid rgba(54, 139, 239, 0.22); border-radius: 18px; background: rgba(255, 255, 255, 0.96); box-shadow: rgba(42, 116, 181, 0.09) 0px 7px 22px; }
.faq-item h3 { display: flex; align-items: flex-start; gap: 11px; margin: 0px 0px 10px; color: rgb(23, 79, 146); font-size: 20px; line-height: 1.5; }
.faq-item h3 span { flex: 0 0 auto; min-width: 46px; padding: 3px 7px; border-radius: 8px; background: linear-gradient(135deg,var(--cyan),var(--blue)); color: rgb(255, 255, 255); font-size: 15px; text-align: center; }
.faq-item p { margin: 0px; color: rgb(52, 69, 91); font-weight: 650; }
.faq-item p + p { margin-top: 9px; }
.faq-item ul { margin: 8px 0px 0px; padding-left: 1.3em; }
.faq-item li + li { margin-top: 4px; }
.faq-item li::marker { color: var(--blue); }
.faq-item .faq-label { margin-top: 10px; color: var(--blue-deep); font-weight: 900; }
.faq-item .faq-note { margin-top: 10px; color: var(--red); font-weight: 800; }
.faq-item .formula { display: inline-block; margin: 10px 0px; padding: 8px 14px; border-radius: 9px; background: rgb(234, 245, 255); color: var(--red); font-size: 20px; font-weight: 900; }
@media (max-width: 700px) {
  .faq-section { margin-top: 28px; }
  .faq-heading h2 { font-size: 28px; }
  .faq-item { padding: 18px 16px; border-radius: 15px; }
  .faq-item h3 { gap: 8px; font-size: 19px; }
  .faq-item h3 span { min-width: 43px; font-size: 14px; }
  .faq-item p, .faq-item li { font-size: 17px; line-height: 1.75; }
  .faq-item .formula { font-size: 18px; }
}
.info-card h2, .info-card .highlight { color: var(--blue) !important; }
.info-card .highlight { font-weight: 900; }
.info-card li.highlight::marker { color: var(--blue); }
.calculator { margin: 34px 0px 28px; padding: 28px; border: 1px solid rgba(54, 139, 239, 0.25); border-radius: 24px; background: linear-gradient(145deg, rgb(248, 252, 255), rgb(234, 246, 255)); box-shadow: rgba(42, 116, 181, 0.14) 0px 12px 36px; }
.calculator-heading { text-align: center; }
.calculator-heading p { margin: 0px; color: rgb(107, 153, 201); font-size: 13px; font-weight: 900; letter-spacing: 0.18em; }
.calculator-heading h2 { margin: 3px 0px; color: var(--blue-deep); font-size: 32px; line-height: 1.35; }
.calculator-heading > span { color: rgb(104, 123, 145); font-size: 16px; }
.calculator-grid { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 16px; margin-top: 24px; }
.calculator-grid label { display: block; padding: 15px; border: 1px solid rgb(200, 224, 250); border-radius: 13px; background: rgb(255, 255, 255); }
.calculator-grid label > span { display: block; margin-bottom: 8px; color: rgb(52, 81, 111); font-size: 16px; font-weight: 800; }
.calculator-grid small { display: block; margin-top: 6px; color: rgb(122, 139, 160); font-size: 13px; }
.input-box { display: flex; align-items: center; overflow: hidden; border: 2px solid rgb(159, 201, 248); border-radius: 10px; background: rgb(248, 252, 255); }
.input-box:focus-within { border-color: var(--blue); box-shadow: rgba(25, 119, 239, 0.12) 0px 0px 0px 3px; }
.input-box input { min-width: 0px; width: 100%; height: 48px; padding: 8px 12px; border: 0px; outline: 0px; background: transparent; color: rgb(24, 62, 105); font-size: 21px; font-weight: 900; }
.input-box b { flex: 0 0 auto; padding: 0px 12px; color: rgb(91, 115, 144); font-size: 15px; }
.calculator-results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 20px; }
.calculator-results > div { padding: 15px 10px; border: 1px solid rgb(189, 218, 250); border-radius: 12px; background: rgb(255, 255, 255); text-align: center; }
.calculator-results span { display: block; color: rgb(105, 128, 151); font-size: 14px; font-weight: 700; }
.calculator-results strong { display: block; margin-top: 3px; color: var(--blue); font-size: 24px; font-weight: 900; }
.calculator-results .total-result { border-color: var(--blue); background: linear-gradient(135deg, rgb(35, 137, 244), rgb(23, 105, 220)); }
.calculator-results .total-result span, .calculator-results .total-result strong { color: rgb(255, 255, 255); }
.calculation-detail { margin: 16px 0px 0px; padding: 12px 15px; border-radius: 10px; background: rgb(255, 255, 255); color: rgb(35, 86, 142); font-weight: 800; text-align: center; }
.calculator-disclaimer { margin: 10px 0px 0px; color: rgb(122, 139, 160); font-size: 13px; text-align: center; }
.month-box input { font-family: inherit; color: rgb(24, 62, 105); }
.calculator-grid .tenure-hint { color: var(--blue); font-weight: 900; }
@media (max-width: 700px) {
  .calculator { margin-top: 24px; padding: 18px 10px; border-radius: 18px; }
  .calculator-heading h2 { font-size: 25px; }
  .calculator-heading > span { font-size: 14px; }
  .calculator-grid { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
  .calculator-grid label { min-width: 0px; padding: 9px; border-radius: 10px; }
  .calculator-grid label > span { min-height: 42px; margin-bottom: 5px; font-size: 15px; line-height: 1.4; }
  .calculator-grid small { display: none; }
  .calculator-grid .tenure-hint { display: block; margin: 4px 0px 0px; font-size: 12px; line-height: 1.3; }
  .input-box { border-width: 1.5px; border-radius: 8px; }
  .input-box input { height: 42px; padding: 6px 7px; font-size: 19px; }
  .month-box input { font-size: 15px; }
  .input-box b { padding: 0px 7px; font-size: 13px; }
  .input-box input::-webkit-inner-spin-button, .input-box input::-webkit-outer-spin-button { appearance: none; margin: 0px; }
  .input-box input[type="number"] { appearance: textfield; }
  .calculator-results { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
  .calculator-results > div { padding: 10px 5px; }
  .calculator-results span { font-size: 13px; }
  .calculator-results strong { font-size: 19px; }
  .calculator-results .total-result { grid-column: 1 / -1; }
  .calculation-detail { margin-top: 10px; padding: 9px 10px; font-size: 14px; line-height: 1.55; text-align: left; }
  .calculator-disclaimer { font-size: 12px; line-height: 1.5; }
}
@media (max-width: 360px) {
  .calculator-grid label > span { font-size: 14px; }
  .input-box input { font-size: 18px; }
  .input-box b { font-size: 12px; }
}
.hero h1 { position: relative; z-index: 1; font-family: "Arial Black", "PingFang SC", "Microsoft YaHei", sans-serif; font-weight: 900; letter-spacing: 0.04em; background: linear-gradient(100deg, rgb(14, 203, 220), rgb(33, 137, 255) 65%, rgb(23, 105, 227)) text; color: transparent; -webkit-text-stroke: 2px rgb(22, 139, 241); text-shadow: rgb(22, 139, 241) 1px 0px, rgb(22, 139, 241) -1px 0px, rgb(22, 139, 241) 0px 1px, rgb(22, 139, 241) 0px -1px; filter: drop-shadow(rgba(35, 82, 132, 0.3) 0px 6px 4px); }
.hero h1::before { content: attr(data-title); position: absolute; z-index: -1; inset: 0px; color: rgb(255, 255, 255); -webkit-text-stroke: 8px rgb(255, 255, 255); paint-order: stroke; text-shadow: rgba(31, 75, 123, 0.28) 0px 4px 5px; }
@media (max-width: 700px) {
  .hero h1 { letter-spacing: 0.01em; -webkit-text-stroke: 1.5px rgb(22, 139, 241); }
  .hero h1::before { -webkit-text-stroke-width: 6px; }
}
@media (max-width: 700px) {
  body { padding-bottom: 82px; }
  .site-nav { width: 100%; margin: 0px; padding: 8px 8px 9px; border-width: 0px 0px 1px; border-radius: 0px; box-shadow: rgba(26, 82, 139, 0.08) 0px 3px 12px; }
  .site-brand { margin-bottom: 6px; font-size: 13px; line-height: 1.2; }
  .site-links { grid-template-columns: repeat(6, minmax(0px, 1fr)); gap: 4px; }
  .site-links button, .site-links a { min-height: 55px; padding: 5px 1px; gap: 3px; border-radius: 9px; box-shadow: none; font-size: 10px; white-space: nowrap; }
  .site-links button::before, .site-links a::before { width: 25px; height: 25px; border-radius: 7px; font-size: 13px; }
  .hero { padding-top: 29px; padding-bottom: 32px; }
  .hero h1 { font-size: clamp(54px, 18vw, 72px); }
  .eyebrow { margin-bottom: 4px; }
  .date { margin-top: 14px; }
  .intro { margin-top: 10px; padding: 12px 14px; }
  .page { margin-top: -8px; padding-bottom: 105px; }
  .mobile-app-nav { right: 7px; bottom: 7px; left: 7px; padding: 5px 4px calc(5px + env(safe-area-inset-bottom)); border-radius: 15px; }
  .mobile-app-nav a, .mobile-app-nav button { gap: 1px; }
  .mobile-app-nav span { width: 26px; height: 26px; border-radius: 8px; font-size: 12px; }
  .mobile-app-nav strong { font-size: 10px; }
  .more-menu { bottom: 72px; }
  #rewards, #calculator, #faq, #activity-info, #example-info, #activity-rules { scroll-margin-top: 8px; }
}
.date { width: max-content; max-width: 100%; padding: 9px 18px; border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 14px; background: rgba(255, 255, 255, 0.88); box-shadow: rgba(7, 52, 96, 0.18) 0px 7px 22px; backdrop-filter: blur(10px); color: rgb(23, 54, 83); }
.date span { padding: 4px 10px; border-radius: 7px; background: var(--blue); color: rgb(255, 255, 255); }
.date strong { color: rgb(27, 48, 75); }
.intro { padding: 17px 20px; border: 1px solid rgba(255, 255, 255, 0.92); border-radius: 14px; background: rgba(255, 255, 255, 0.9); box-shadow: rgba(7, 52, 96, 0.16) 0px 7px 22px; backdrop-filter: blur(10px); color: rgb(32, 57, 82); text-shadow: none; }
@media (max-width: 700px) {
  .date { width: 100%; padding: 9px 10px; border-radius: 11px; }
  .date span { width: max-content; margin: auto; }
  .date strong { font-size: 20px; }
  .intro { padding: 14px 15px; border-radius: 11px; color: rgb(32, 57, 82); }
}
.contact-card { display: flex; align-items: center; width: min(570px, 100%); margin: 16px auto 0px; padding: 13px 18px; border: 1px solid rgba(255, 255, 255, 0.75); border-radius: 16px; background: linear-gradient(120deg, rgb(22, 197, 216), rgb(25, 119, 239) 62%, rgb(18, 100, 213)); box-shadow: rgba(10, 80, 157, 0.28) 0px 9px 25px; color: rgb(255, 255, 255); text-align: left; text-decoration: none; transition: transform 0.18s, box-shadow 0.18s; }
.contact-card:hover { transform: translateY(-2px); box-shadow: rgba(10, 80, 157, 0.35) 0px 12px 30px; }
.contact-icon { display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; margin-right: 12px; border-radius: 50%; background: rgb(255, 255, 255); color: var(--blue); font-size: 25px; font-weight: 900; transform: rotate(-18deg); }
.contact-copy { display: grid; }
.contact-copy small, .contact-handle small { color: rgba(255, 255, 255, 0.82); font-size: 13px; font-weight: 700; }
.contact-copy strong { font-size: 21px; font-weight: 900; }
.contact-handle { display: grid; margin-left: auto; padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, 0.38); text-align: right; }
.contact-handle strong { font-size: 22px; font-weight: 900; letter-spacing: 0.02em; }
@media (max-width: 700px) {
  .contact-card { padding: 11px 12px; border-radius: 12px; }
  .contact-icon { flex-basis: 39px; width: 39px; height: 39px; margin-right: 9px; font-size: 21px; }
  .contact-copy small, .contact-handle small { font-size: 11px; }
  .contact-copy strong, .contact-handle strong { font-size: 17px; }
  .contact-handle { padding-left: 10px; }
}
@media (max-width: 360px) {
  .contact-copy strong, .contact-handle strong { font-size: 15px; }
  .contact-icon { display: none; }
}
.page { display: flex; flex-direction: column; }
.page > .data-card, .page > .calculator { order: 0; }
.page > .faq-section { order: 1; }
.page > .info-card { order: 2; }
.contact-card { position: fixed; z-index: 80; right: 24px; bottom: 24px; width: auto; max-width: 340px; margin: 0px; padding: 12px 16px; border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 18px; box-shadow: rgba(8, 63, 130, 0.38) 0px 10px 30px; }
.contact-card:hover { transform: translateY(-3px); }
.contact-copy small { font-size: 12px; }
.contact-copy strong { white-space: nowrap; font-size: 19px; }
.contact-arrow { margin-left: 16px; color: rgb(255, 255, 255); font-size: 32px; font-weight: 900; line-height: 1; }
.contact-handle { display: none; }
@media (max-width: 700px) {
  body { padding-bottom: 78px; }
  .contact-card { right: 10px; bottom: 10px; left: 10px; width: auto; max-width: none; padding: 9px 14px; border-radius: 14px; }
  .contact-icon { flex-basis: 38px; width: 38px; height: 38px; }
  .contact-copy small { font-size: 11px; }
  .contact-copy strong { font-size: 17px; }
  .contact-arrow { margin-left: auto; font-size: 28px; }
}
.agent-entry { position: fixed; z-index: 79; right: 24px; bottom: 112px; display: flex; align-items: center; gap: 7px; padding: 11px 15px; border: 2px solid rgb(255, 255, 255); border-radius: 15px; background: linear-gradient(135deg, rgb(255, 255, 255), rgb(232, 245, 255)); box-shadow: rgba(8, 63, 130, 0.24) 0px 8px 24px; color: var(--blue); font-family: inherit; cursor: pointer; }
.agent-entry span { font-size: 12px; font-weight: 700; }
.agent-entry strong { font-size: 18px; font-weight: 900; }
.agent-entry i { font-size: 25px; font-style: normal; line-height: 1; }
.agent-entry:hover { background: rgb(255, 255, 255); transform: translateY(-2px); }
@media (max-width: 700px) {
  body { padding-bottom: 132px; }
  .agent-entry { right: 10px; bottom: 72px; left: 10px; justify-content: center; padding: 8px 12px; border-radius: 12px; }
  .agent-entry span { font-size: 11px; }
  .agent-entry strong { font-size: 16px; }
  .agent-entry i { position: absolute; right: 16px; }
}
.member-entry { position: fixed; z-index: 78; right: 24px; bottom: 170px; display: flex; align-items: center; gap: 7px; padding: 11px 15px; border: 2px solid rgb(255, 255, 255); border-radius: 15px; background: linear-gradient(135deg, rgb(255, 255, 255), rgb(237, 249, 255)); box-shadow: rgba(8, 63, 130, 0.22) 0px 8px 24px; color: rgb(11, 158, 182); font-family: inherit; cursor: pointer; }
.member-entry span { font-size: 12px; font-weight: 700; }
.member-entry strong { font-size: 18px; font-weight: 900; }
.member-entry i { font-size: 25px; font-style: normal; line-height: 1; }
.member-entry:hover { background: rgb(255, 255, 255); transform: translateY(-2px); }
@media (max-width: 700px) {
  body { padding-bottom: 186px; }
  .member-entry { right: 10px; bottom: 126px; left: 10px; justify-content: center; padding: 8px 12px; border-radius: 12px; }
  .member-entry span { font-size: 11px; }
  .member-entry strong { font-size: 16px; }
  .member-entry i { position: absolute; right: 16px; }
}
.site-nav { width: min(760px, 100% - 24px); margin: 0px auto 8px; padding: 12px; border: 1px solid rgb(213, 232, 251); border-radius: 14px; background: rgba(255, 255, 255, 0.9); text-align: center; }
.site-brand { display: block; margin-bottom: 8px; color: var(--blue); font-size: 14px; font-weight: 900; letter-spacing: 0.1em; }
.site-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.site-links button, .site-links a { padding: 6px 9px; border: 1px solid rgb(198, 223, 248); border-radius: 7px; background: rgb(245, 250, 255); color: rgb(82, 106, 132); font-family: inherit; font-size: 12px; font-weight: 800; line-height: 1.25; text-decoration: none; white-space: nowrap; cursor: pointer; }
.site-links button:hover, .site-links a:hover, .site-links .active { border-color: var(--blue); background: rgb(234, 245, 255); color: var(--blue); }
@media (max-width: 700px) {
  .site-nav { padding: 14px 10px; border-radius: 17px; }
  .site-brand { margin-bottom: 10px; font-size: 15px; }
  .site-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
  .site-links button, .site-links a { display: flex; min-width: 0px; min-height: 82px; padding: 9px 4px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px solid rgb(201, 224, 248); border-radius: 14px; background: linear-gradient(145deg, rgb(255, 255, 255), rgb(237, 247, 255)); box-shadow: rgba(35, 103, 174, 0.1) 0px 4px 11px; font-size: 13px; line-height: 1.25; white-space: normal; }
  .site-links button::before, .site-links a::before { content: attr(data-icon); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, rgb(39, 191, 225), rgb(25, 119, 239)); box-shadow: rgba(25, 119, 239, 0.22) 0px 3px 8px; color: rgb(255, 255, 255); font-size: 18px; font-weight: 900; }
  .site-links .active { border-color: rgb(106, 169, 245); background: rgb(232, 244, 255); }
  .site-links .active::before { background: linear-gradient(135deg, rgb(25, 119, 239), rgb(16, 93, 200)); }
}
.mobile-app-nav, .more-menu, .more-menu-overlay { display: none; }
@media (max-width: 700px) {
  html { scroll-padding-top: 10px; scroll-padding-bottom: 90px; }
  body { padding-bottom: 92px; }
  .contact-card, .agent-entry, .member-entry { display: none; }
  .mobile-app-nav { position: fixed; z-index: 110; right: 8px; bottom: 8px; left: 8px; display: grid; grid-template-columns: repeat(4, 1fr); padding: 7px 5px calc(7px + env(safe-area-inset-bottom)); border: 1px solid rgba(113, 166, 222, 0.35); border-radius: 18px; background: rgba(255, 255, 255, 0.96); box-shadow: rgba(13, 62, 117, 0.25) 0px 8px 30px; backdrop-filter: blur(16px); }
  .mobile-app-nav a, .mobile-app-nav button { display: flex; min-width: 0px; padding: 3px 2px; flex-direction: column; align-items: center; gap: 2px; border: 0px; background: transparent; color: rgb(96, 117, 139); font-family: inherit; text-decoration: none; }
  .mobile-app-nav span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; background: rgb(237, 246, 255); color: var(--blue); font-size: 14px; font-weight: 900; }
  .mobile-app-nav strong { font-size: 11px; font-weight: 900; }
  .mobile-app-nav .signup span { background: linear-gradient(135deg, rgb(32, 198, 220), rgb(25, 119, 239)); color: rgb(255, 255, 255); }
  .mobile-app-nav .signup strong { color: var(--blue); }
  .more-menu-overlay { position: fixed; z-index: 118; inset: 0px; display: block; background: rgba(12, 38, 67, 0.42); backdrop-filter: blur(2px); }
  .more-menu-overlay[hidden] { display: none; }
  .more-menu { position: fixed; z-index: 120; right: 8px; bottom: 82px; left: 8px; display: block; padding: 15px; border: 1px solid rgb(205, 225, 247); border-radius: 20px; background: rgb(255, 255, 255); box-shadow: rgba(11, 57, 108, 0.3) 0px 12px 38px; }
  .more-menu[hidden] { display: none; }
  .more-menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; color: rgb(38, 76, 115); }
  .more-menu-head strong { font-size: 18px; }
  .more-menu-head button { width: 32px; height: 32px; border: 0px; border-radius: 50%; background: rgb(237, 246, 255); color: var(--blue); font-size: 23px; }
  .more-menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
  .more-menu-grid a, .more-menu-grid button { display: flex; min-height: 78px; padding: 8px 4px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px solid rgb(206, 226, 247); border-radius: 13px; background: rgb(247, 251, 255); color: rgb(52, 91, 130); font-family: inherit; font-size: 13px; font-weight: 800; text-decoration: none; }
  .more-menu-grid span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, rgb(41, 192, 223), rgb(25, 119, 239)); color: rgb(255, 255, 255); font-weight: 900; }
  .menu-open { overflow: hidden; }
}