/* Local variable fonts. Licenses and upstream sources live in assets/fonts/. */
@font-face {
  font-family: "Sora";
  src: url("/assets/fonts/sora-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-latin-ext-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  --font-display: "Sora", "Instrument Sans", Arial, sans-serif;
  --font-body: "Instrument Sans", Arial, sans-serif;
  --type-heading: clamp(32px, 3.05vw, 48px);
}
body { font-family: var(--font-body); font-size: 16px; line-height: 1.62; }
button, input, select, textarea { font-family: var(--font-body); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; }
h2, .features h2, .section-intro h2, .flow-layout h2, .product-layout h2, .closing-content h2 {
  font-size: var(--type-heading); line-height: 1.13; letter-spacing: -.045em;
  text-wrap: balance;
}
p { text-wrap: pretty; }
.eyebrow, .hero .eyebrow, .section-copy .eyebrow, .scenario-copy .eyebrow,
.integration-path .eyebrow, .closing-content .eyebrow, .modal .eyebrow {
  font-size: 11px; line-height: 1.6; letter-spacing: .16em; font-weight: 600;
  margin-bottom: 16px;
}
.button, .button.small, .text-button { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.button, .button.small { min-height: 46px; padding-inline: 24px; }
.desktop-nav, .desktop-nav a, .desktop-nav button { font-size: 13px; font-weight: 600; }
.mobile-nav a { font-size: 16px; }
.nav-glass { width: 71%; }
.brand-lockup { width: clamp(164px, 17vw, 260px); }
.nav-cta { font-size: 14px; }
@media (min-width: 1101px) {
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; }
  .nav-glass { width: 100%; max-width: 1120px; min-width: 0; gap: 24px; }
  .desktop-nav { margin-left: auto; flex: 0 0 auto; gap: clamp(16px, 1.65vw, 28px); }
}

/* Give the display type room beside the original animated scene. */
.hero-shell { padding-top: clamp(110px, 9vw, 150px); }
.hero { min-height: clamp(510px, 39.5vw, 660px); padding-top: 16px; }
.hero-copy { width: 48%; }
.hero h1 {
  font-size: clamp(44px, 3.4vw, 58px); line-height: 1.045;
  letter-spacing: -.055em; font-weight: 620; text-wrap: balance;
  margin-bottom: 24px;
}
.hero-title-line { display: block; }
.hero-description { font-size: 17px; line-height: 1.6; width: 100%; max-width: 420px; margin-bottom: 28px; }
.hero .button { font-size: 14px; min-height: 48px; padding-inline: 28px; }
.hero .actions { margin-bottom: 30px; }
.trust-row { font-size: 12px; gap: 24px; font-weight: 500; }
.hero-visual { top: 20px; }
.hero-rail { padding: 24px 28px 28px; }
.rail-caption > span:first-child { font-size: 10px; letter-spacing: .15em; }
.rail-caption > span:last-child { font-size: 12px; }
.rail-step strong { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -.035em; }
.rail-step p { font-size: 13px; line-height: 1.55; }
.rail-index { font-size: 11px; font-variant-numeric: tabular-nums; }

/* Section rhythm and readable cards, independent of viewport scaling. */
.ecosystem { padding-block: 34px; gap: 28px; }
.section-label { font-size: 11px; line-height: 1.7; letter-spacing: .11em; }
.role-tabs { height: 62px; }
.role-tab { font-size: 13px; gap: 12px; padding-inline: 12px; }
.role-tab .icon { width: 24px; height: 24px; }
.section-grid { grid-template-columns: 34% minmax(0, 1fr); gap: 40px; }
.features { padding-block: 24px 52px; gap: 40px; }
.section-copy > p:not(.eyebrow), .product-layout .section-copy > p:not(.eyebrow),
.flow-layout .section-copy > p:not(.eyebrow), .faq-intro > p:not(.eyebrow) {
  font-size: 16px; line-height: 1.65; max-width: 43ch; margin-top: 20px; margin-bottom: 24px;
}
.feature-grid { gap: 16px; }
.feature-card { min-height: 178px; padding: 22px 20px; gap: 16px; flex-direction: column; align-items: flex-start; }
.feature-card .round-icon { width: 44px; height: 44px; }
.feature-card .round-icon .icon { width: 25px; height: 25px; }
.feature-card strong { font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: -.025em; line-height: 1.35; white-space: normal; margin-bottom: 8px; }
.feature-card > span > span { font-size: 14px; line-height: 1.55; }
.solution-scenario { padding: 34px; gap: 38px; margin-top: 8px; }
.scenario-copy h3 { font-size: 28px; line-height: 1.2; letter-spacing: -.035em; }
.scenario-copy > p:not(.eyebrow) { font-size: 15px; line-height: 1.65; }
.scenario-step > span { font-family: var(--font-display); font-size: 26px; font-weight: 500; font-variant-numeric: tabular-nums; }
.scenario-step h4, .integration-path h4 { font-size: 14px; line-height: 1.45; font-weight: 600; }
.scenario-step p, .integration-path li p { font-size: 14px; line-height: 1.65; }
.flow-section { padding-block: 48px; }
.flow-node > strong { font-size: 14px; }
.flow-node > span:last-child { font-size: 12px; line-height: 1.6; }
.flow-detail { font-size: 13px; }
.corridor-discovery, .operating-controls, .settlement-faq { padding-block: 56px; }
.section-intro { gap: 48px; margin-bottom: 34px; }
.section-intro > p { font-size: 16px; line-height: 1.65; max-width: 38ch; }

/* Planner and operational copy use the quieter interface face. */
.planner-overline { font-size: 11px; letter-spacing: .13em; }
.picker-label { font-size: 13px; }
.direction-switch button { font-size: 14px; }
.picker-value strong { font-size: 14px; line-height: 1.4; }
.picker-value small { font-size: 12px; line-height: 1.45; }
.picker-trigger { min-height: 74px; }
.picker-panel strong, .picker-currency .picker-panel strong { font-size: 12px; line-height: 1.4; }
.picker-panel small, .picker-currency .picker-panel small { font-size: 11px; line-height: 1.5; }
.picker-panel button { min-height: 110px; }
.planner-help, .planner-note { font-size: 12px; line-height: 1.65; }
.planner-result-heading h3 { font-size: 36px; font-weight: 500; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.planner-purpose { font-size: 12px; }
.planner-journey p { font-size: 12px; line-height: 1.5; }
.journey-code { font-size: 15px; font-weight: 600; }
.plan-checks strong { font-size: 14px; line-height: 1.45; }
.plan-checks p { font-size: 13px; line-height: 1.65; }
.planner-actions .button, .planner-actions .text-button { font-size: 14px; }
.product-section { padding-top: 48px; }
.product-layout { grid-template-columns: 32% minmax(0, 1fr); gap: 40px; }
.dashboard-stage { padding-right: 1.5%; }
.dashboard { grid-template-columns: 138px minmax(0, 1fr); }
.app-nav { font-size: 11px; min-height: 34px; }
.dashboard h2, .dashboard h3 { font-family: var(--font-body); letter-spacing: -.025em; }
.dashboard-kpis { font-variant-numeric: tabular-nums; }
.control-card { padding: 28px 24px; }
.control-card h3 { font-size: 19px; line-height: 1.3; letter-spacing: -.035em; }
.control-card p { font-size: 14px; line-height: 1.65; }
.control-detail { font-size: 11px; line-height: 1.5; }
.integration-path { padding: 36px; margin-top: 24px; }
.integration-path h3 { font-size: 32px; line-height: 1.2; letter-spacing: -.035em; }
.integration-path .text-button { font-size: 14px; }
.integration-path li > span { font-size: 13px; font-variant-numeric: tabular-nums; }
.faq-list summary { font-size: 17px; line-height: 1.5; padding-block: 24px; letter-spacing: -.015em; }
.faq-list details > p { font-size: 16px; line-height: 1.75; }
.closing-section, .closing-content { min-height: 380px; }
.closing-content { padding-block: 54px; }
.closing-content h2 + p { font-size: 16px; line-height: 1.65; max-width: 45ch; margin-top: 20px; margin-bottom: 26px; }
.closing-content .button { font-size: 14px; min-height: 48px; }
.site-footer h2 { font-family: var(--font-body); font-size: 11px; letter-spacing: .13em; }
.site-footer-column a, .site-footer-email { font-size: 14px; }
.site-footer-brand p { font-size: 14px; }
.site-footer-bottom { font-size: 12px; }
.modal h2 { font-size: clamp(28px, 3vw, 38px); }
.modal-heading > p:not(.eyebrow), .detail-description { font-size: 16px; line-height: 1.65; }
.modal label, .modal legend { font-size: 14px; }
.modal input, .modal textarea { font-size: 16px; }
.modal .tour-amount input { font-size: 28px; }

@media (min-width: 1101px) {
  .hero-visual { left: 20%; }
}
@media (min-width: 1101px) and (max-width: 1279px) {
  .hero-copy { width: 55%; }
  .hero-visual { width: 1100px; top: 0; }
}
@media (max-width: 1100px) {
  .desktop-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .nav-glass { width: calc(100% - 154px); justify-content: space-between; }
  .hero-copy { width: 65%; }
  .hero h1 { font-size: clamp(40px, 4.45vw, 49px); }
  .hero-description { width: 86%; font-size: 16px; }
  .trust-row { gap: 16px; }
  .section-grid { grid-template-columns: 36% minmax(0, 1fr); gap: 30px; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-card { min-height: 178px; }
  .role-tab { gap: 8px; font-size: 12px; }
  .flow-node > strong { font-size: 12px; white-space: normal; }
  .flow-node > span:last-child { font-size: 11px; white-space: normal; }
  .product-layout { grid-template-columns: 1fr; gap: 34px; }
  .product-layout > .section-copy { max-width: 620px; padding-bottom: 0; }
  .product-layout .section-copy > p:not(.eyebrow) { max-width: 54ch; }
  .dashboard-stage { max-width: 850px; width: 100%; justify-self: center; padding: 16px 10px 0; }
}
@media (min-width: 601px) and (max-width: 1100px) {
  .hero-visual { width: 1100px; left: calc(50% - 410px); top: 20px; transform: none; }
  .hero-art::after { background: linear-gradient(90deg, #f2f6fbe6, #f2f6fb9c 42%, transparent 72%), linear-gradient(0deg, #eff6fb, transparent 16%); }
}
@media (max-width: 820px) {
  .hero { min-height: 455px; }
  .hero-copy { width: 65%; padding-left: 0; }
  .hero h1 { font-size: clamp(40px, 4.45vw, 49px); }
  .hero-description { width: 86%; }
  .rail-step strong { font-size: 14px; }
  .rail-step p { font-size: 12px; }
  .ecosystem { grid-template-columns: 1fr; gap: 16px; }
  .section-grid { grid-template-columns: 1fr; gap: 30px; }
  .features .section-copy, .flow-layout .section-copy { max-width: 590px; }
  .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feature-card { padding: 22px 18px; }
  .solution-scenario { padding: 28px; }
  .section-intro { align-items: flex-start; gap: 32px; }
  .section-intro > p { max-width: 32ch; }
  .control-card { padding: 26px 22px; }
  .integration-path { padding: 30px; }
}
@media (max-width: 700px) {
  .rail-step strong { font-size: 16px; }
  .rail-step p { font-size: 13px; }
  .rail-index { margin-bottom: 0; }
  .role-tabs { height: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 6px; }
  .role-tab { min-height: 54px; }
  .role-tab + .role-tab::before { display: none; }
  .role-tab:nth-child(4) { grid-column: span 2; }
}
@media (min-width: 601px) and (max-width: 820px) {
  .hero { min-height: 850px; }
  .hero-copy { width: 100%; }
  .hero h1 { font-size: 44px; max-width: 620px; }
  .hero-description { width: 90%; max-width: 550px; }
  .trust-row { max-width: none; }
  .hero-art { inset: 0 0 auto; height: 960px; }
  .hero-visual { top: auto; bottom: -10px; width: 980px; left: 50%; transform: translateX(-62%); }
  .hero-art::after { background: linear-gradient(180deg, #eff5fb 0%, #eff5fb 39%, #eff5fbef 48%, #eff5fb00 63%, transparent 92%, #eff6fb 100%); }
}
@media (max-width: 600px) {
  :root { --type-heading: clamp(30px, 8vw, 38px); }
  .brand-lockup { width: clamp(114px, 36vw, 156px); }
  .nav-glass { min-width: 0; padding: 9px 11px; gap: 8px; }
  .menu-toggle { width: 32px; height: 32px; padding: 5px; flex-shrink: 0; }
  .nav-cta { min-height: 44px; padding-inline: 16px; font-size: 12px; }
  .hero-shell { padding-top: 103px; }
  .hero { min-height: 860px; padding-top: 14px; }
  .hero-copy { width: 100%; }
  .hero h1 { font-size: clamp(36px, 9.5vw, 49px); line-height: 1.08; letter-spacing: -.05em; margin-bottom: 22px; }
  .hero .eyebrow { font-size: 10px; letter-spacing: .12em; max-width: 33ch; }
  .hero-description { font-size: 16px; line-height: 1.6; width: 100%; max-width: 46ch; margin-bottom: 24px; }
  .hero .actions { margin-bottom: 24px; }
  .hero .button { min-height: 48px; font-size: 14px; }
  .trust-row { font-size: 11px; gap: 10px 16px; line-height: 1.5; }
  .hero-art { height: 963px; }
  .hero-art::after { background: linear-gradient(180deg, #eff5fb 0%, #eff5fb 46%, #eff5fbef 54%, #eff5fb00 68%, transparent 92%, #eff6fb 100%); }
  .hero-visual { top: auto; }
  .hero-rail { padding: 24px; }
  .rail-caption > span:first-child { font-size: 10px; }
  .eyebrow, .section-copy .eyebrow, .scenario-copy .eyebrow, .integration-path .eyebrow, .closing-content .eyebrow { font-size: 10px; letter-spacing: .12em; margin-bottom: 14px; }
  .ecosystem { padding-block: 30px; }
  .role-tabs { height: auto; }
  .role-tab { min-height: 54px; font-size: 12px; padding: 10px 6px; }
  .role-tab .icon { width: 21px; height: 21px; }
  .features { padding-block: 22px 38px; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .feature-card { min-height: 190px; padding: 22px 18px; gap: 16px; }
  .feature-card strong { font-size: 14px; }
  .feature-card > span > span { font-size: 14px; }
  .section-copy > p:not(.eyebrow), .product-layout .section-copy > p:not(.eyebrow), .flow-layout .section-copy > p:not(.eyebrow), .faq-intro > p:not(.eyebrow) { font-size: 16px; line-height: 1.65; }
  .solution-scenario { padding: 26px 22px; gap: 28px; }
  .scenario-copy h3 { font-size: 26px; }
  .scenario-step > span { font-size: 18px; }
  .flow-section { padding-block: 38px; }
  .flow-node > strong { font-size: 14px; }
  .flow-node > span:last-child { font-size: 12px; }
  .flow-detail { font-size: 12px; }
  .corridor-discovery, .operating-controls, .settlement-faq { padding-block: 40px; }
  .section-intro { display: block; margin-bottom: 28px; }
  .section-intro > p { max-width: none; margin-top: 20px; }
  .planner-config, .planner-result { padding: 26px 22px; }
  .planner-result-heading h3 { font-size: 32px; }
  .planner-journey { grid-template-columns: 1fr 14px 1fr 14px 1fr; gap: 5px; }
  .planner-journey p { font-size: 11px; }
  .planner-actions .button { min-height: 48px; }
  .product-section { padding-top: 38px; }
  .dashboard { grid-template-columns: 43px minmax(0, 1fr); }
  .dashboard-stage { padding: 10px 0 0; }
  .control-grid { gap: 14px; }
  .control-card { padding: 24px 18px; }
  .control-card h3 { font-size: 17px; }
  .control-card p { font-size: 14px; }
  .control-detail { font-size: 10px; }
  .integration-path { padding: 28px 22px; }
  .integration-path h3 { font-size: 30px; }
  .faq-list summary { font-size: 16px; padding-block: 22px; }
  .faq-list details > p { font-size: 15px; padding-right: 8px; }
  .closing-content { padding-block: 42px 190px; }
  .closing-content h2 + p { font-size: 16px; max-width: 35ch; }
}
@media (max-width: 374px) {
  .hero { min-height: 910px; }
  .hero-art { height: 1013px; }
  .hero h1 { font-size: 35px; }
  .hero-description { font-size: 15px; }
  .role-tab { font-size: 11px; gap: 6px; }
  .feature-grid, .control-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 160px; flex-direction: row; gap: 18px; }
  .feature-card .round-icon { flex-shrink: 0; }
  .control-card h3 { font-size: 19px; }
}
