@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Barlow+Condensed:wght@400;600;700;800&display=swap');

  :root {
    --axion-primary:         #007DC3; /* Honda blue — hero bg, headings, buttons */
    --axion-primary-mid:     #006AA8; /* Darker blue — trust bar, hover states */
    --axion-primary-dark:    #005080; /* Deepest blue — footer, pressed states */
    --axion-primary-light:   #E0F1FA; /* Pale blue tint — card icon backgrounds */
    --axion-secondary:       #005A96; /* Deep anchor blue — labels, step numbers */
    --axion-secondary-bright:#1A8FD1; /* Bright mid-blue — widget card header */
    --axion-white:           #FFFFFF;
    --axion-gray-50:         #F4F7FA; /* Near-white page surface */
    --axion-gray-100:        #E2EAF0; /* Dividers, card borders */
    --axion-gray-300:        #B0BEC8; /* Placeholder icons */
    --axion-gray-600:        #4A5C6A; /* Body copy */
    --axion-gray-900:        #1A2530; /* Near-black headings on white */
    --axion-shadow-sm: 0 2px 8px rgba(0,125,195,0.09);
    --axion-shadow-md: 0 8px 32px rgba(0,125,195,0.14);
    --axion-shadow-lg: 0 20px 60px rgba(0,125,195,0.20);
    --axion-radius:    12px;
    --axion-radius-lg: 20px;
    --axion-transition: 0.25s cubic-bezier(0.4,0,0.2,1);
    --axion-font-display: 'Barlow Condensed', sans-serif;
    --axion-font-body:    'DM Sans', sans-serif;
  }

  .axion-page * { box-sizing: border-box; margin: 0; padding: 0; }
  .axion-page { font-family: var(--axion-font-body); color: var(--axion-gray-900); background: var(--axion-white); overflow-x: hidden; -webkit-font-smoothing: antialiased; }

  /* ══ HERO ══ */
  .axion-hero { position: relative; background: var(--axion-primary); padding: 80px 24px 100px; overflow: hidden; }
  .axion-hero::after { content: ''; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,0.12); pointer-events: none; width: 400px; height: 400px; bottom: -150px; left: -100px; }
  .axion-hero-image-circle { position: absolute; top: -120px; right: -160px; width: 680px; height: 680px; border-radius: 50%; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); pointer-events: none; z-index: 0; }
  .axion-hero-image-circle img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; opacity: .20; }
  .axion-hero-inner { max-width: 860px; margin: 0 auto; position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
  .axion-hero-title { font-family: var(--axion-font-display); font-size: clamp(32px, 3vw, 50px) !important; font-weight: 800; line-height: 1.0; color: #FFFFFF !important; letter-spacing: -0.01em; margin-bottom: 20px; }
  .axion-hero-title span { color: #A8D8F5 !important; }
  .axion-hero-sub { font-size: 17px; line-height: 1.65; color: rgba(255,255,255,0.70) !important; max-width: 520px; }

  /* ══ WIDGET CARD ══ */
  .axion-widget-card { background: var(--axion-white); border-radius: var(--axion-radius-lg); box-shadow: var(--axion-shadow-lg); overflow: hidden; }
  .axion-widget-card-header { background: var(--axion-secondary-bright); padding: 20px 28px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255,255,255,0.12); }
  .axion-widget-card-header svg { color: var(--axion-white); flex-shrink: 0; }
  .axion-widget-card-header-text { font-family: var(--axion-font-display); font-size: 18px; font-weight: 700; color: var(--axion-white); letter-spacing: 0.02em; text-transform: uppercase; }
  .axion-widget-body { padding: 28px; background: var(--axion-gray-50); }

  /* ══ TRUST BAR ══ */
  .axion-trust-bar { background: var(--axion-primary-mid); padding: 0; }
  .axion-trust-bar-inner { max-width: 860px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); }
  .axion-trust-item { display: flex; align-items: center; gap: 14px; padding: 20px 28px; border-right: 1px solid rgba(255,255,255,0.12); }
  .axion-trust-item:last-child { border-right: none; }
  .axion-trust-icon { width: 38px; height: 38px; border-radius: 8px; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #A8D8F5; }
  .axion-trust-label { font-size: 13px; font-weight: 600; color: var(--axion-white); line-height: 1.3; }
  .axion-trust-sub { font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 2px; line-height: 1.4; }

  /* ══ CONTENT SECTIONS ══ */
  .axion-section { padding: 80px 24px; }
  .axion-section-inner { max-width: 960px; margin: 0 auto; }
  .axion-section-label { font-family: var(--axion-font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--axion-primary); margin-bottom: 12px; }
  .axion-section-title { font-family: var(--axion-font-display); font-size: clamp(30px,4.5vw,48px); font-weight: 800; line-height: 1.1; color: var(--axion-gray-900); margin-bottom: 16px; letter-spacing: -0.01em; }
  .axion-section-body { font-size: 16px; line-height: 1.7; color: var(--axion-gray-600); max-width: 640px; margin-bottom: 48px; }

  /* Info cards */
  .axion-info-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 20px; }
  .axion-info-card { background: var(--axion-white); border: 1px solid var(--axion-gray-100); border-radius: var(--axion-radius); padding: 28px; box-shadow: var(--axion-shadow-sm); transition: box-shadow var(--axion-transition), transform var(--axion-transition); position: relative; overflow: hidden; }
  .axion-info-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,var(--axion-primary),var(--axion-secondary)); transform: scaleX(0); transform-origin: left; transition: transform var(--axion-transition); }
  .axion-info-card:hover { box-shadow: var(--axion-shadow-md); transform: translateY(-3px); }
  .axion-info-card:hover::before { transform: scaleX(1); }
  .axion-info-card-icon { width: 46px; height: 46px; border-radius: 10px; background: var(--axion-primary-light); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; color: var(--axion-primary); }
  .axion-info-card h3 { font-family: var(--axion-font-display); font-size: 20px; font-weight: 700; color: var(--axion-gray-900); margin-bottom: 8px; letter-spacing: 0.01em; text-transform: uppercase; }
  .axion-info-card p { font-size: 14px; line-height: 1.65; color: var(--axion-gray-600); }

  /* ══ STEPS ══ */
  .axion-steps-section { background: var(--axion-primary-dark); padding: 80px 24px; position: relative; overflow: hidden; }
  .axion-steps-section::before { content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.06); top: -200px; right: -100px; pointer-events: none; }
  .axion-steps-inner { max-width: 960px; margin: 0 auto; position: relative; z-index: 1; }
  .axion-steps-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 32px; margin-top: 48px; position: relative; }
  .axion-steps-grid::before { content: ''; position: absolute; top: 28px; left: 40px; right: 40px; height: 1px; background: rgba(255,255,255,0.12); z-index: 0; }
  .axion-step { position: relative; z-index: 1; text-align: center; }
  .axion-step-num { width: 56px; height: 56px; border-radius: 50%; background: var(--axion-primary); font-family: var(--axion-font-display); font-size: 22px; font-weight: 800; color: var(--axion-white); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; box-shadow: 0 0 0 6px rgba(0,125,195,0.25); }
  .axion-step h4 { font-family: var(--axion-font-display); font-size: 17px; font-weight: 700; color: var(--axion-white); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
  .axion-step p { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.60); }

  /* ══ CTA ══ */
  .axion-cta-section { background: var(--axion-gray-50); padding: 80px 24px; border-top: 1px solid var(--axion-gray-100); }
  .axion-cta-inner { max-width: 800px; margin: 0 auto; text-align: center; }
  .axion-cta-inner .axion-section-title { margin-bottom: 12px; }
  .axion-cta-inner .axion-section-body { margin: 0 auto 40px; text-align: center; }
  .axion-cta-buttons { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; color:#FFFFFF !important; }
  .axion-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--axion-font-body); font-size: 15px; font-weight: 600; border-radius: 8px; padding: 14px 28px; cursor: pointer; border: 2px solid transparent; text-decoration: none !important; transition: background var(--axion-transition), color var(--axion-transition), border-color var(--axion-transition), transform var(--axion-transition), box-shadow var(--axion-transition); letter-spacing: 0.01em; }
  .axion-btn:hover { transform: translateY(-2px); }
  .axion-btn-primary { background: var(--axion-primary); color: var(--axion-white) !important; box-shadow: var(--axion-shadow-sm); }
  .axion-btn-primary:hover { background: var(--axion-primary-mid); color: var(--axion-white); box-shadow: var(--axion-shadow-md); }
  .axion-btn-outline { background: transparent; color: var(--axion-primary); border-color: var(--axion-primary); }
  .axion-btn-outline:hover { background: var(--axion-primary); color: var(--axion-white); box-shadow: var(--axion-shadow-sm); }

  /* ══ FAQ — native <details>/<summary>, zero JavaScript ══ */
  .axion-faq-section { background: var(--axion-white); padding: 80px 24px; border-top: 1px solid var(--axion-gray-100); }
  .axion-faq-inner { max-width: 800px; margin: 0 auto; }
  .axion-faq-list { margin-top: 48px; display: flex; flex-direction: column; gap: 12px; }
  .axion-faq-item { border: 1px solid var(--axion-gray-100); border-radius: var(--axion-radius); overflow: hidden; transition: box-shadow var(--axion-transition); }
  .axion-faq-item:hover { box-shadow: var(--axion-shadow-sm); }
  .axion-faq-item details > summary { list-style: none; }
  .axion-faq-item details > summary::-webkit-details-marker { display: none; }
  .axion-faq-item details > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; background: var(--axion-gray-50); cursor: pointer; transition: background var(--axion-transition); user-select: none; }
  .axion-faq-item details > summary:hover { background: var(--axion-primary-light); }
  .axion-faq-item details[open] > summary { background: var(--axion-primary-light); }
  .axion-faq-question-text { font-family: var(--axion-font-display); font-size: 18px; font-weight: 700; color: var(--axion-gray-900); line-height: 1.3; letter-spacing: 0.01em; }
  .axion-faq-icon { flex-shrink: 0; position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--axion-primary); transition: background var(--axion-transition), transform var(--axion-transition); }
  .axion-faq-icon::before, .axion-faq-icon::after { content: ''; position: absolute; top: 50%; left: 50%; background: var(--axion-white); border-radius: 2px; }
  .axion-faq-icon::before { width: 12px; height: 2px; transform: translate(-50%,-50%); }
  .axion-faq-icon::after  { width: 2px; height: 12px; transform: translate(-50%,-50%); }
  .axion-faq-item details[open] > summary .axion-faq-icon { background: var(--axion-secondary); transform: rotate(45deg); }
  .axion-faq-answer-body { padding: 16px 24px 22px; background: var(--axion-white); border-top: 1px solid var(--axion-gray-100); }
  .axion-faq-answer-body p { font-size: 15px; line-height: 1.7; color: var(--axion-gray-600); }

  /* ══ DISCLAIMER ══ */
  .axion-disclaimer { background: var(--axion-primary-dark); padding: 28px 24px; text-align: center; }
  .axion-disclaimer p { font-size: 12px; line-height: 1.6; color: rgba(255,255,255,0.45); max-width: 700px; margin: 0 auto; }
  .axion-disclaimer a { color: rgba(255,255,255,0.65); text-decoration: underline; text-underline-offset: 3px; }

  @keyframes axion-fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
  .axion-fade-up { animation: axion-fadeUp 0.55s cubic-bezier(0.4,0,0.2,1) both; }
  .axion-fade-up-d1 { animation-delay: 0.1s; }
  .axion-fade-up-d2 { animation-delay: 0.2s; }
  .axion-fade-up-d3 { animation-delay: 0.35s; }

  @media (max-width: 900px) { .axion-hero-image-circle { width: 420px; height: 420px; top: -80px; right: -120px; } }
  @media (max-width: 700px) {
    .axion-hero-image-circle { display: none; }
    .axion-trust-bar-inner { grid-template-columns: 1fr; }
    .axion-trust-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
    .axion-trust-item:last-child { border-bottom: none; }
    .axion-steps-grid::before { display: none; }
    .axion-cta-buttons { flex-direction: column; align-items: center; }
    .axion-btn { width: 100%; max-width: 320px; justify-content: center; }
    .axion-widget-body { padding: 16px; }
    .axion-widget-body > *, .axion-embed-placeholder { width: 100%; box-sizing: border-box; }
  }
