:root {--bg: #f5f7fb;--card: #ffffff;--accent: #1E88E5;--accent-soft: #eff4ff;--text-main: #111827;--text-sub: #4b5563;--border-soft: #e5e7eb;--radius-lg: 16px;--radius-sm: 8px;--max-width: 1200px;}
* { box-sizing: border-box; }
body {margin: 0;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;background: var(--bg);color: var(--text-main);line-height: 1.7;}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
header {background: rgba(255,255,255,0.9);backdrop-filter: blur(12px);border-bottom: 1px solid var(--border-soft);position: sticky;top: 0;z-index: 20;}
.nav-inner {max-width: var(--max-width);margin: 0 auto;padding: 12px 20px;display: flex;align-items: center;justify-content: space-between;}
.logo {display: flex;height: 30px;align-items: center;gap: 8px;font-weight: 600;font-size: 18px;}
.logo img {height: 100%;}
.logo-mark {width: 26px;height: 26px;border-radius: 8px;background: var(--accent);display: flex;align-items: center;justify-content: center;color: #fff;font-size: 16px;font-weight: 700;}
.nav-links {display: flex;gap: 20px;font-size: 14px;align-items: center;}
.nav-links a { color: var(--text-sub); }
.btn {display: inline-flex;align-items: center;justify-content: center;padding: 10px 18px;border-radius: 999px;border: 1px solid transparent;font-size: 14px;font-weight: 500;cursor: pointer;text-decoration: none;}
.btn-primary {background: var(--accent);color: #fff !important;box-shadow: 0 10px 25px rgba(37,99,235,0.15);}
.btn-primary:hover {filter: brightness(0.95);text-decoration: none;}
.btn-ghost {background: transparent;color: var(--text-sub);border-color: var(--border-soft);}
main {max-width: var(--max-width);margin: 0 auto;padding: 32px 20px 64px;}
section {margin-bottom: 56px;}
.hero {width: 100vw;margin-left: calc( ( 100vw - 100% ) / -2 );padding: 80px 0;background: #EEE;background: linear-gradient(0deg, rgba(238, 238, 238, 1) 0%, rgba(248, 249, 251, 1) 25%);}
.hero-inner {max-width: 1200px;margin: 0 auto;padding: 0 40px;display: flex;align-items: center;justify-content: space-between;gap: 40px;}
.hero-text h1 {font-size: 2em;line-height: 1.3;margin-bottom: 20px;font-weight: 700;}
.hero-text p {font-size: 18px;line-height: 1.7;margin-bottom: 30px;color: #444;}
.cta-btn {display: inline-block;padding: 14px 28px;background: #1E88E5;color: #fff;border-radius: 8px;font-size: 18px;font-weight: 600;text-decoration: none;}
.hero-image img {width: 520px;border-radius: 20px;box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);}
.section-title {font-size: 20px;margin-bottom: 6px;}
.section-lead {font-size: 14px;color: var(--text-sub);margin-bottom: 18px;}
.two-cols {display: grid;grid-template-columns: repeat(2, minmax(0,1fr));gap: 20px;}
.card {background: var(--card);border-radius: var(--radius-lg);padding: 18px 18px 16px;border: 1px solid var(--border-soft);box-shadow: 0 10px 30px rgba(15,23,42,0.04);font-size: 14px;}
.card h3 {font-size: 16px;margin: 0 0 8px;}
.card ul {margin: 0;padding-left: 18px;font-size: 13px;color: var(--text-sub);}
.feature-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));gap: 16px;}
.feature-item {background: var(--card);border-radius: var(--radius-lg);padding: 14px 14px 12px;border: 1px solid var(--border-soft);font-size: 13px;}
.feature-item h3 {font-size: 14px;margin: 0 0 6px;}
.feature-item p {margin: 0;color: var(--text-sub);}
.pricing-table {width: 100%;border-collapse: collapse;font-size: 14px;background: var(--card);border-radius: var(--radius-lg);overflow: hidden;box-shadow: 0 10px 30px rgba(15,23,42,0.04);}
.pricing-table th,
.pricing-table td {padding: 12px 14px;border-bottom: 1px solid var(--border-soft);}
.pricing-table th {background: #f9fafb;text-align: left;font-weight: 600;font-size: 13px;}
.pricing-table tr:last-child td { border-bottom: none; }
.pricing-name {font-weight: 600;}
.pricing-price {font-weight: 600;color: var(--accent);}
.flow-list {list-style: none;padding: 0;margin: 0;counter-reset: step;display: grid;grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));gap: 16px;}
.flow-list li {position: relative;background: var(--card);border-radius: var(--radius-lg);padding: 13px 13px 13px 40px;border: 1px solid var(--border-soft);font-size: 13px;color: var(--text-sub);min-height: 70px;}
.flow-list li::before {counter-increment: step;content: counter(step);position: absolute;left: 15px;top: 15px;width: 18px;height: 18px;border-radius: 999px;background: var(--accent);color: var(--accent-soft);font-size: 11px;display: flex;align-items: center;justify-content: center;font-weight: 600;}
.faq {display: grid;grid-template-columns: repeat(auto-fit, minmax(260px,1fr));gap: 16px;}
.faq-item {background: var(--card);border-radius: var(--radius-lg);padding: 14px 14px 12px;border: 1px solid var(--border-soft);font-size: 13px;}
.faq-q {font-weight: 600;margin-bottom: 4px;}
.cta-section {text-align: center;background: linear-gradient(135deg,#1E88E5,#176cb6);color: #fff;border-radius: 24px;padding: 26px 18px 24px;box-shadow: 0 20px 50px rgba(37,99,235,0.35);}
.cta-section h2 {margin: 0 0 6px;font-size: 20px;}
.cta-section p {margin: 0 0 18px;font-size: 13px;opacity: 0.9;}
.cta-actions {display: flex;justify-content: center;flex-wrap: wrap;gap: 10px;}
.btn-white {background: #fff;color: var(--accent);border-radius: 999px;padding: 10px 18px;font-size: 14px;font-weight: 500;}
.btn-outline-light {background: transparent;border: 1px solid rgba(255,255,255,0.5);color: #e5edff;padding: 9px 14px;border-radius: 999px;font-size: 13px;}
footer {border-top: 1px solid var(--border-soft);padding: 18px 20px 30px;font-size: 12px;color: var(--text-sub);}
.footer-inner {max-width: var(--max-width);margin: 0 auto;display: flex;flex-wrap: wrap;justify-content: space-between;gap: 10px;align-items: center;}
.footer-links {display: flex;flex-wrap: wrap;gap: 15px;}
@media (min-width: 860px) {
  .pc {display:block;}
  .sp {display:none;}
}
@media (max-width: 860px) {
  .hero {padding: 40px 0;grid-template-columns: 1fr;}
  .hero-inner {flex-direction: column;width: 100%;padding: 0 20px;}
  .hero-image img {width: 100%;}
  header {position: static;}
  .two-cols {display: block;}
  .card {margin-bottom: 1em;}
  .pc {display:none;}
  .sp {display:block;}
  .pricing-table {font-size:13px;}
}
@media (max-width: 540px) {
  .nav-links { display: none; }
  .hero h1 { font-size: 24px; }
  main { padding-top: 24px; }
  .cta-section h2 { font-size: 18px; }
  .footer-inner {display: block;}
  .footer-links {display: block;}
  .footer-links a {display:block;padding: .5em 0;}
  .footer-links a::before {content:"-";margin-right: .5em}
  .copyright {margin: 2em 0;}
}
.page main {max-width: 840px;margin: 0 auto;background: #fff;padding: 20px 30px;border-radius: 12px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);}
.page h1 { font-size: 1.6em; margin-bottom: 16px; }
.page h2 { font-size: 1.2em; margin-top: 24px; margin-bottom: 8px; }
.page p { font-size: 14px; margin: 4px 0 8px; }
.page li { font-size: 14px; }
.page a { color: #1E88E5; text-decoration: none; }
.page a:hover { text-decoration: underline; }
.page header {position: relative;padding: 20px 20px;background: transparent; backdrop-filter: none;border: none;color: #6b7280;font-size: 14px;font-weight: bold;text-align: center;}
.page footer {padding: 20px 20px;border: none;font-size: 12px;color: #6b7280;text-align: center;}
.page footer a {color:#6b7280;}
.page table {width: 100%;border-collapse: collapse;margin-top: 16px;font-size: 14px;}
.page table th, table td {padding: 14px;border-bottom: 1px solid #e5e5e5;vertical-align: top;text-align: left;}
.page table th {width: 32%;font-weight: 600;background: #fafafa;}
@media (max-width: 540px) {
  .page main {max-width: 94%;margin: 0 auto;padding: 10px 20px;}
  .page table {font-size: 12px;}
  .page table th {display: block;width: 100%;padding: 12px 12px;background:#eee;border-top: 2px solid #ddd;border-bottom: none;}
  .page table td {display: block;padding:14px 12px;border-bottom: none;}
  .page table tr {border: none;}
}