:root {
  --home-ink: #16243d;
  --home-muted: #5e6c82;
  --home-line: #dce4ef;
  --home-blue: #3569f4;
  --home-blue-dark: #2451c8;
  --home-teal: #078e88;
  --home-white: #fff;
  --home-panel: #f5f8fc;
  --home-navy: #142640;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--home-ink);
  background: #fff;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: #fff; color: var(--home-ink); }
button, a { font: inherit; }
a { color: inherit; }
img { display: block; max-width: 100%; }

.home-header { position: absolute; z-index: 20; top: 0; left: 0; right: 0; height: 76px; }
.home-header-inner { width: min(1180px, calc(100% - 48px)); height: 100%; margin: 0 auto; display: flex; align-items: center; gap: 34px; }
.home-logo { display: block; width: 126px; flex: 0 0 126px; }
.home-logo img { width: 100%; height: auto; }
.home-nav { margin-left: auto; display: flex; align-items: center; gap: 30px; }
.home-nav a, .home-login { color: #3f4c62; font-size: 14px; text-decoration: none; transition: color 160ms ease; }
.home-nav a:hover, .home-login:hover { color: var(--home-blue); }
.home-header-actions { display: flex; align-items: center; gap: 18px; }
.home-language { width: 36px; height: 32px; border: 0; background: transparent; color: #6a768b; cursor: pointer; }
.home-language:hover { color: var(--home-blue); }
.home-signup { height: 38px; padding: 0 15px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #bfd0f7; border-radius: 6px; background: rgba(255,255,255,.72); color: #2f5dd6; font-size: 14px; font-weight: 650; text-decoration: none; box-shadow: 0 8px 22px rgba(37,81,200,.08); transition: transform 160ms ease, background 160ms ease, border-color 160ms ease; }
.home-signup:hover { transform: translateY(-2px); background: #fff; border-color: #89a8ef; }
.home-signup svg { width: 15px; height: 15px; }

.home-hero { position: relative; min-height: 620px; overflow: hidden; background: radial-gradient(ellipse 68% 52% at 76% -6%, rgba(126,160,211,.66), rgba(185,205,231,.18) 78%, transparent), radial-gradient(ellipse 50% 45% at 4% 52%, rgba(151,183,222,.5), rgba(208,222,238,.14) 82%, transparent), linear-gradient(180deg, #eef3f8, #eaf0f7 52%, #fafafa); }
.home-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: transparent; }
.home-hero-inner { position: relative; z-index: 1; width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding-top: 112px; }
.home-hero-copy { max-width: 790px; margin: 0 auto; text-align: center; }
.home-hero h1 { margin: 0; color: #172844; font-size: 52px; line-height: 1.12; font-weight: 690; letter-spacing: 0; }
.home-hero-copy > p { max-width: 690px; margin: 18px auto 0; color: #586a84; font-size: 18px; line-height: 1.65; }
.home-hero-actions { margin-top: 24px; display: flex; justify-content: center; gap: 12px; }
.home-primary-action, .home-secondary-action { height: 48px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 7px; font-size: 15px; font-weight: 650; text-decoration: none; transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease; }
.home-primary-action { border: 1px solid var(--home-blue); background: var(--home-blue); color: #fff; box-shadow: 0 12px 28px rgba(53,105,244,.22); }
.home-primary-action:hover { transform: translateY(-2px); background: var(--home-blue-dark); box-shadow: 0 16px 34px rgba(53,105,244,.28); }
.home-secondary-action { border: 1px solid #cbd8eb; background: rgba(255,255,255,.78); color: #30405b; }
.home-secondary-action:hover { transform: translateY(-2px); background: #fff; }
.home-primary-action svg, .home-secondary-action svg { width: 16px; height: 16px; }
.home-hero-facts { margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 0; color: #667690; font-size: 13px; }
.home-hero-facts span { padding: 0 16px; border-right: 1px solid #bfcce0; }
.home-hero-facts span:last-child { border-right: 0; }

.home-product-frame { position: relative; width: min(980px, 100%); height: 230px; margin: 34px auto 0; overflow: hidden; border: 1px solid rgba(118,143,181,.28); border-radius: 8px 8px 0 0; background: #fff; box-shadow: 0 26px 60px rgba(42,71,118,.15); }
.home-product-frame img { width: 100%; height: calc(100% - 34px); object-fit: cover; object-position: top center; }
.home-product-bar { height: 34px; padding: 0 13px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid #e4e9f0; background: #fafbfd; }
.home-product-bar span { width: 7px; height: 7px; border-radius: 50%; background: #c8d1de; }
.home-product-bar strong { margin-left: 8px; color: #8190a4; font-size: 10px; font-weight: 600; }

.home-section-inner { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }
.home-section-heading { max-width: 650px; }
.home-section-index { margin: 0 0 18px; color: var(--home-blue); font-size: 12px; font-weight: 750; font-variant-numeric: tabular-nums; }
.home-section-heading h2 { margin: 0; font-size: 40px; line-height: 1.25; font-weight: 680; letter-spacing: 0; }
.home-section-heading > p:last-child { margin: 17px 0 0; color: var(--home-muted); font-size: 16px; line-height: 1.75; }
.home-section-heading-wide { max-width: 820px; }

.home-workflow { padding: 20px 0 118px; background: #fff; }
.home-flow-line { position: relative; margin: 72px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); list-style: none; }
.home-flow-line::before { content: ""; position: absolute; left: 4%; right: 4%; top: 46px; height: 1px; background: #cad6e7; transform-origin: left center; animation: home-route-scan 3.4s ease-in-out infinite alternate; }
.home-flow-line li { position: relative; display: flex; align-items: center; flex-direction: column; text-align: center; }
.home-flow-line li > span { color: #8a98ac; font-size: 10px; font-variant-numeric: tabular-nums; }
.home-flow-line li > svg { position: relative; z-index: 1; width: 46px; height: 46px; margin: 12px 0 18px; padding: 12px; border: 1px solid #d5deeb; border-radius: 50%; background: #fff; color: var(--home-blue); }
.home-flow-line strong { font-size: 15px; }
.home-flow-line small { margin-top: 7px; color: var(--home-muted); font-size: 12px; line-height: 1.4; }

.home-capabilities { padding: 112px 0; border-top: 1px solid #e7ecf3; background: var(--home-panel); }
.home-capability-list { margin-top: 58px; border-top: 1px solid #dbe3ed; }
.home-capability-list article { min-height: 144px; padding: 28px 0; display: grid; grid-template-columns: 58px minmax(0,1fr) 120px; align-items: center; gap: 26px; border-bottom: 1px solid #dbe3ed; }
.home-capability-icon { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid #cdd8e6; border-radius: 8px; background: #fff; color: var(--home-blue); }
.home-capability-icon svg { width: 21px; height: 21px; }
.home-capability-list h3 { margin: 0; font-size: 21px; line-height: 1.35; letter-spacing: 0; }
.home-capability-list p { max-width: 700px; margin: 9px 0 0; color: var(--home-muted); font-size: 14px; line-height: 1.7; }
.home-capability-list article > span { justify-self: end; color: #6f7f94; font-size: 13px; }

.home-routes { padding: 112px 0 120px; background: var(--home-navy); color: #fff; }
.home-section-heading-light .home-section-index { color: #8fb1ff; }
.home-section-heading-light > p:last-child { color: #afbdd0; }
.home-route-compare { margin-top: 58px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
.home-route-compare article { min-height: 260px; padding: 42px 48px 42px 0; }
.home-route-compare article + article { padding-left: 48px; border-left: 1px solid rgba(255,255,255,.18); }
.home-route-compare svg { width: 28px; height: 28px; color: #86aaff; }
.home-route-compare h3 { margin: 28px 0 0; font-size: 26px; letter-spacing: 0; }
.home-route-compare p { max-width: 420px; margin: 13px 0 0; color: #b9c6d7; font-size: 15px; line-height: 1.7; }

.home-final { padding: 112px 24px; background: #fff; }
.home-final-inner { width: min(1120px,100%); min-height: 390px; margin: 0 auto; padding: 70px 64px; display: flex; align-items: flex-start; flex-direction: column; justify-content: center; border-radius: 8px; background: #2d5fd2 url("/dashboard-assets/brand/routras-hero-background.png") center 58% / cover no-repeat; color: #fff; box-shadow: 0 22px 52px rgba(38,77,164,.2); }
.home-final-inner > img { width: 124px; }
.home-final h2 { max-width: 780px; margin: 34px 0 0; font-size: 38px; line-height: 1.35; font-weight: 660; letter-spacing: 0; color: #142640; }
.home-final p { margin: 15px 0 0; color: #425b78; font-size: 15px; }
.home-final a { height: 46px; margin-top: 28px; padding: 0 18px; display: inline-flex; align-items: center; gap: 8px; border-radius: 6px; background: #142640; color: #fff; font-size: 14px; font-weight: 650; text-decoration: none; transition: transform 160ms ease, background 160ms ease; }
.home-final a:hover { transform: translateY(-2px); background: #0b1b31; }
.home-final a svg { width: 16px; height: 16px; }

.home-footer { border-top: 1px solid #e3e9f1; background: #fff; }
.home-footer-inner { width: min(1120px,calc(100% - 48px)); min-height: 180px; margin: 0 auto; padding: 46px 0; display: grid; grid-template-columns: 150px minmax(0,1fr) auto; align-items: start; gap: 28px; }
.home-footer-logo { width: 126px; }
.home-footer p { margin: 4px 0 0; color: var(--home-muted); font-size: 13px; }
.home-footer nav { display: flex; gap: 24px; }
.home-footer nav a { color: #46536a; font-size: 13px; text-decoration: none; }
.home-footer nav a:hover { color: var(--home-blue); }
.home-footer small { grid-column: 2 / 4; color: #8c97a8; font-size: 11px; }

[data-home-enter], [data-home-reveal] { opacity: 0; transform: translateY(18px); }
body.home-ready [data-home-enter] { opacity: 1; transform: translateY(0); transition: opacity 540ms ease-out, transform 540ms ease-out; }
body.home-ready .home-product-frame[data-home-enter] { transition-delay: 100ms; }
[data-home-reveal].home-visible { opacity: 1; transform: translateY(0); transition: opacity 460ms ease-out, transform 460ms ease-out; }

@keyframes home-route-scan { from { transform: scaleX(.15); opacity: .45; } to { transform: scaleX(1); opacity: 1; } }

@media (max-width: 900px) {
  .home-header-inner { width: min(100% - 32px,720px); }
  .home-nav { display: none; }
  .home-header-actions { margin-left: auto; }
  .home-hero { min-height: 640px; }
  .home-hero-inner { width: min(100% - 32px,720px); padding-top: 105px; }
  .home-hero h1 { font-size: 44px; }
  .home-product-frame { height: 210px; margin-top: 34px; }
  .home-workflow { padding-top: 16px; }
  .home-section-inner { width: min(100% - 32px,720px); }
  .home-flow-line { grid-template-columns: repeat(3,minmax(0,1fr)); row-gap: 44px; }
  .home-flow-line::before { display: none; }
  .home-capability-list article { grid-template-columns: 54px minmax(0,1fr); }
  .home-capability-list article > span { grid-column: 2; justify-self: start; }
}

@media (max-width: 620px) {
  .home-header { height: 66px; }
  .home-header-inner { width: calc(100% - 28px); gap: 12px; }
  .home-logo { width: 108px; flex-basis: 108px; }
  .home-login { display: none; }
  .home-header-actions { gap: 6px; }
  .home-language { width: 32px; }
  .home-signup { height: 36px; padding: 0 11px; font-size: 13px; }
  .home-hero { min-height: 550px; }
  .home-hero-inner { width: calc(100% - 28px); padding-top: 90px; }
  .home-hero h1 { font-size: 36px; line-height: 1.2; }
  .home-hero-copy > p { margin-top: 15px; font-size: 15px; line-height: 1.6; }
  .home-hero-actions { margin-top: 19px; flex-direction: row; }
  .home-primary-action, .home-secondary-action { width: 100%; }
  .home-hero-facts { margin-top: 15px; align-items: stretch; flex-direction: row; gap: 0; font-size: 11px; }
  .home-hero-facts span { padding: 0 7px; border-right: 1px solid #bfcce0; }
  .home-hero-facts span:last-child { border-right: 0; }
  .home-product-frame { height: 145px; margin-top: 26px; }
  .home-section-inner { width: calc(100% - 28px); }
  .home-workflow { padding: 24px 0 78px; }
  .home-capabilities, .home-routes { padding: 78px 0; }
  .home-section-heading h2 { font-size: 31px; }
  .home-section-heading > p:last-child { font-size: 15px; }
  .home-flow-line { margin-top: 48px; grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 38px; }
  .home-capability-list { margin-top: 42px; }
  .home-capability-list article { min-height: 0; padding: 26px 0; grid-template-columns: 44px minmax(0,1fr); gap: 15px; }
  .home-capability-icon { width: 42px; height: 42px; }
  .home-capability-list h3 { font-size: 18px; }
  .home-capability-list p { font-size: 13px; }
  .home-route-compare { grid-template-columns: 1fr; }
  .home-route-compare article { min-height: 0; padding: 34px 0; }
  .home-route-compare article + article { padding-left: 0; border-top: 1px solid rgba(255,255,255,.18); border-left: 0; }
  .home-final { padding: 64px 14px; }
  .home-final-inner { min-height: 370px; padding: 42px 28px; }
  .home-final h2 { margin-top: 30px; font-size: 29px; }
  .home-footer-inner { width: calc(100% - 28px); grid-template-columns: 1fr; gap: 16px; }
  .home-footer nav { flex-wrap: wrap; }
  .home-footer small { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-home-enter], [data-home-reveal] { opacity: 1; transform: none; }
}